<template>
  <div class="edit-tool">
    <Button class="operate" :class="{ active: activeTool === 'addText' }" @click="changeActiveTool('addText')" title="Add Text">
      <AddText />{{ $t('header.addText') }}
    </Button>
    <Button class="operate" :class="{ active: activeTool === 'addImage' }" @click="changeActiveTool('addImage')" title="Add Image">
      <AddImage />{{ $t('header.addImage') }}<input v-if="isMobileDevice" type="file" ref="editorImageInput" accept=".png, .jpg, .jpeg" style="display: none;" @change="handleFile">
    </Button>
    <!-- <div class="divider pc"></div>
    <Button class="history" :title="$t('header.undo')">
      <EditBack />
    </Button>
    <Button class="history" :title="$t('header.redo')">
      <EditGo />
    </Button> -->
  </div>
</template>

<script setup>
  import { computed, h, ref } from 'vue'
  import { useViewerStore } from '@/stores/modules/viewer'
  import { useDocumentStore } from '@/stores/modules/document'
  import MessageError from '@/assets/icons/icon-message-error.svg'
  import { isMobileDevice } from '@/helpers/device'

  import core from '@/core'
  const { switchTool, switchAnnotationEditorMode } = core

  const useDocument = useDocumentStore()
  const useViewer = useViewerStore()

  const activeTool = computed(() => useDocument.getActiveTool)
  const currentPage = computed(() => useViewer.getCurrentPage)

  const editorImageInput = ref()

  const changeActiveTool = (tool) => {
    useDocument.setToolState(tool)

    useViewer.toggleActiveHand(false)
    switchTool(0)
    
    switchAnnotationEditorMode(0)

    if (activeTool.value === 'addImage' && isMobileDevice) {
      editorImageInput.value.click()
    }
  }

  const handleFile = (e) => {
    const file = e.target.files[0]
    if (file.size > 10 * 1024 * 1024) {
      window.$message.error(instance.$t('editorPanel.maximum'), {
        duration: 3000,
        icon: () => h('img', { src: MessageError })
      })
      e.target.value = ''
      return;
    }

    if (file) {
      const reader = new FileReader()
      reader.onload = function (e) {
        const image = new Image()
        image.onload = function () {
          const data = {
            imageBase64: e.target.result,
            width: image.width,
            height: image.height,
            pageNum: currentPage.value
          }
          console.log(data)
          core.addEditorImage(data)
        }
        image.onerror = function (error) {
          console.log(error)
        }
        image.src = e.target.result
      }
      reader.onerror = function (error) {
        console.log(error)
      }
      reader.readAsDataURL(file)
    }
  }
</script>

<style lang="scss" scoped>
.edit-tool {
  display: flex;
  align-items: center;
  .operate {
    min-width: 120px;
    display: flex;
    align-items: center;
    font-family: Helvetica;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    margin-right: 0px;
    svg {
      margin-right: 8px;
    }
  }
  .divider {
    margin-left: 8px;
  }
}
</style>

