<template>
  <Button
    img="icon-full-screen"
    className="full-screen"
    v-bind="{ ...item }"
    :onClick="onClick"
    :title="$t('header.fullScreen')"
  >
    <Fullscreen />
  </Button>
</template>

<script setup>
  import core from '@/core'
  import { computed } from 'vue'
  import { useViewerStore } from '@/stores/modules/viewer'
  import { useDocumentStore } from '@/stores/modules/document'
  const { requestFullScreenMode } = core

  const { item } = defineProps(['item'])
  const useViewer = useViewerStore()
  const useDocument = useDocumentStore()

  const isActive = computed(() => {
    return useViewer.isElementOpen('leftPanel')
  })

  core.addEvent('presentationmodechanged', ({ state }) => {
    if (state === 1) {
      useViewer.setFullMode(false)
    } else if (state === 3) {
      useViewer.setFullMode(true)
    }
  })

  const onClick = () => {
    const isiPad = (navigator.userAgent.match(/(iPad)/) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1))
    if (isActive.value && (window.innerWidth < 930 || isiPad)) {
      useViewer.toggleElement('leftPanel')
    }
    
    const imgUi = document.getElementById("sign-image-save")
    if (imgUi) imgUi.remove()

    requestFullScreenMode()
    useDocument.setToolState('')
  }
</script>

<style>
@media screen and (max-width: 767.9px) {
  .full-screen {
    display: none;
  }
}
</style>
