<template>
  <div
    class="stamp-panel"
    :class="{ closed: !isOpen, mobile: isMobileDevice }"
    :style="{ height: isMobileDevice ? '70%' : isHeaderDisabled ? '100%' : 'calc(100% - 88px)'}"
    >
    <div class="sidebar-title">
      {{ $t('header.stamp') }}
      <Close v-if="isMobileDevice" class="close-button" @click="closePanel" />
    </div>
    <div class="sidebar-tabs-header">
      <Button
        :className="activePanelTab === 'STANDARD' ? 'active' : ''"
        :isActive="activePanelTab === 'STANDARD'"
        data-element="STANDARD"
        @click="setActiveStampPanelTab('STANDARD')"
      >
        <span>{{ $t('stampPanel.standard') }}</span>
      </Button>
      <Button
        :className="activePanelTab === 'DYNAMIC' ? 'active' : ''"
        :isActive="activePanelTab === 'DYNAMIC'"
        data-element="DYNAMIC"
        @click="setActiveStampPanelTab('DYNAMIC')"
      >
        <span>{{ $t('stampPanel.dynamic') }}</span>
      </Button>
    </div>

    <div class="sidebar-content">
      <!-- Standard -->
      <div class="standard-container" :class="{ hidden: activePanelTab !== 'STANDARD' }">
        <div class="block"><img @click="addStamp" src="/images/stamp/Approved.png" alt="Approved"></div>
        <div class="block"><img @click="addStamp" src="/images/stamp/NotApproved.png" alt="Not Approved"></div>
        <div class="block"><img @click="addStamp" src="/images/stamp/Completed.png" alt="Completed"></div>
        <div class="block"><img @click="addStamp" src="/images/stamp/Final.png" alt="Final"></div>
        <div class="block"><img @click="addStamp" src="/images/stamp/Draft.png" alt="Draft"></div>
        <div class="block"><img @click="addStamp" src="/images/stamp/Confidential.png" alt="Confidential"></div>
        <div class="block"><img @click="addStamp" src="/images/stamp/ForPublicRelease.png" alt="For Public Release"></div>
        <div class="block"><img @click="addStamp" src="/images/stamp/NotForPublicRelease.png" alt="Not For Public Release"></div>
        <div class="block"><img @click="addStamp" src="/images/stamp/ForComment.png" alt="For Comment"></div>
        <div class="block"><img @click="addStamp" src="/images/stamp/Void.png" alt="Void"></div>
        <div class="block"><img @click="addStamp" src="/images/stamp/PreliminaryResults.png" alt="Preliminary Results"></div>
        <div class="block"><img @click="addStamp" src="/images/stamp/InformationOnly.png" alt="Information Only"></div>
        <!-- <div class="block"><img @click="addStamp" src="/images/stamp/Accepted.png" alt="Accepted"></div> -->
        <!-- <div class="block"><img @click="addStamp" src="/images/stamp/Rejected.png" alt="Rejected"></div> -->
        <div class="block"><img @click="addStamp" src="/images/stamp/Witness.png" alt="Witness"></div>
        <div class="block"><img @click="addStamp" src="/images/stamp/InitialHere.png" alt="Initial Here"></div>
        <div class="block"><img @click="addStamp" src="/images/stamp/SignHere.png" alt="Sign Here"></div>
        <div class="block"><img @click="addStamp" src="/images/stamp/revised.png" alt="revised"></div>
        <!-- <div class="block"><img @click="addStamp" src="/images/stamp/PrivateMark1.png" alt="PrivateMark#1"></div> -->
        <!-- <div class="block"><img @click="addStamp" src="/images/stamp/PrivateMark2.png" alt="PrivateMark#2"></div> -->
        <!-- <div class="block"><img @click="addStamp" src="/images/stamp/PrivateMark3.png" alt="PrivateMark#3"></div> -->
      </div>

      <!-- Dynamic -->
      <div class="customize-container" :class="{ hidden: activePanelTab !== 'DYNAMIC' }">
        <div class="block" @click="addStamp(1)">
          <div class="dynamic-stamp red">
            <p class="title">REVISED</p>
            <p>{{ currentTime }}</p>
          </div>
        </div>
        <div class="block" @click="addStamp(2)">
          <div class="dynamic-stamp green">
            <p class="title">REVISED</p>
            <p>{{ currentTime }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { computed, watch, ref, onMounted } from 'vue'
  import { useViewerStore } from '@/stores/modules/viewer'
  import { useDocumentStore } from '@/stores/modules/document'
  import core from '@/core'
  import { isMobileDevice } from '@/helpers/device'

  const { switchTool, switchAnnotationEditorMode } = core

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

  const activePanelTab = computed(() => useViewer.getActiveElementTab('stampPanel'))
  const isOpen = computed(() => useViewer.isElementOpen('stampPanel'))
  const activeTool = computed(() => useDocument.getActiveTool)
  const currentPage = computed(() => useViewer.getCurrentPage)

  const currentTime = ref('')
  
  onMounted(() => {
    updateCurrentTime()
    setInterval(updateCurrentTime, 1000)
  })

  watch(() => activeTool.value, (newValue, oldValue) => {
    if (newValue !== 'stamp') {
      useViewer.closeElement('stampPanel')
    }
  })

  watch(() => isOpen.value, (newValue, oldValue) => {
    if (newValue) {
      setActiveStampPanelTab('STANDARD')
    }
  })

  const setActiveStampPanelTab = (tab) => {
    useViewer.setActiveElementTab('stampPanel', tab)
  }

  const updateCurrentTime = () => {
    const now = new Date()
    currentTime.value = formatDate(now)
  }
  
  const formatDate = (date) => {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')

    return `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`
  }

  const addStamp = (e) => {
    const isEvent = e instanceof PointerEvent || e instanceof MouseEvent || typeof e === 'object'
    const data = {
      page: currentPage.value,
      stampType: isEvent ? 'standard' : 'dynamic'
    }

    if (isEvent) {
      data.stampContainer = e.target
    } else {
      data.color = e
      data.shape = '0'
      data.stampContainer = {
        width: 190,
        height: 36
      }
      data.text = 'REVISED'
      data.time = currentTime.value
    }

    core.handleStamp(data)

    const screenWidth = window.innerWidth
    if (screenWidth <= 640) {
      useDocument.setToolState('stamp')
      useViewer.toggleActiveHand(false)
      switchTool(0)
      switchAnnotationEditorMode(0)
      useViewer.closeElement('stampPanel')
    }
  }

  const closePanel = () => {
    useViewer.closeElement('stampPanel')
    useDocument.setToolState('')
  }
</script>

<style lang="scss">
  .hidden {
    display: none;
  }
  .stamp-panel {
    position: fixed;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    height: calc(100% - 88px);
    overflow: hidden;
    transition: transform .3s ease-in-out;
    background-color: var(--c-side-bg);
    border-left: 1px solid var(--c-side-header-border);
    &.closed {
      transform: translateX(100%);
    }
    a {
      text-decoration: none;
    }
    .sidebar-tabs-header {
      display: flex;
      align-items: center;
      background-color: var(--c-right-side-header-bg);
      .button {
        flex: 1;
        margin: 0;
        padding: 12px 0;
        border-radius: initial;
        color: var(--c-right-side-header-text);
        &:not(.disabled):hover {
          background-color: var(--c-right-side-header-bg);
        }
        &:not(.disabled).active {
          background-color: var(--c-right-side-header-active);
          color: var(--c-white);
        }
        span {
          font-size: 12px;
          line-height: 16px;
        }
      }
      .divider {
        margin-right: 0;
      }
    }
    .sidebar-title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 36px;
      font-size: 14px;
      line-height: 17px;
      font-weight: 700;
      color: var(--c-right-side-header-text);
    }
    .sidebar-content {
      margin-top: 16px;
      width: 100%;
      flex: 1;
      overflow: hidden;
      .block {
        padding: 8px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        &:hover {
          background-color: #DDE9FF;
        }
      }
      img {
        max-width: 230px;
        max-height: 66px;
      }
      .standard-container {
        overflow: auto;
        height: 100%;
      }
      .dynamic-stamp {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 16px;
        width: 190px;
        height: 36px;
        border-radius: 6px;
        text-align: left;
        font-family: Helvetica;
        font-size: 10px;
        font-weight: 400;
        line-height: 16px;
        .title {
          font-size: 14px;
        }
        &.red {
          color: #9A1C04;
          border: 1px solid #9A1C04;
          background: var(--c-dynamic-stamp-red-bg);
        }
        &.green {
          color: #4F7D2A;
          border: 1px solid #A0BA8E;
          background: var(--c-dynamic-stamp-green-bg);
        }
      }
    }
  }

  .stamp-panel.mobile {
    background-color: var(--c-side-header-bg);
    border-left: none;
    bottom: 0;
    border-radius: 10px 10px 0 0;
    box-shadow: 0px 4px 32px 0px var(--c-doc-editor-popup-shadow);

    &.closed {
      transform: translateY(100%);
      box-shadow: none;
    }

    .close-button {
      position: absolute;
      right: 14px;
    }

    .standard-container {
      padding-bottom: 80px;
    }
  }

  @media screen and (max-width: 640px) {
    .stamp-panel {
      width: 100vw;
    }
  }
  @media screen and (min-width: 641px) {
    .stamp-panel {
      width: 260px;
      .thumbnail-view {
        padding: 0 16px;
      }
    }
  }
</style>
