<template>
  <div class="setting-container">
    <n-popover
      ref="popover"
      placement="top-start"
      trigger="click"
      :show-arrow="false"
      to="#outerContainer"
      :raw="true"
    >
      <template #trigger>
        <Button v-bind="{ ...item }" :class="{ active: showDropdown }">
          <Pageset />
          <Arrow class="arrow-left" />
        </Button>
      </template>
      <div class="drop-down">
        <div class="drop-item" :class="{ active: scrollMode === 'Vertical' }" @click="handleScrollMode('Vertical', 0)"><Button><VerticalScrolling /></Button>Vertical Scrolling</div>
        <div class="drop-item" :class="{ active: scrollMode === 'Horizontal' }" @click="handleScrollMode('Horizontal', 1)"><Button><HorizontalScrolling /></Button>Horizontal Scrolling</div>
        <div class="drop-down-divider"></div>
        <div class="drop-item" :class="{ active: pageMode === 0 }" @click="handleSpreadMode(0)"><Button><SinglePage /></Button>Single Page</div>
        <div class="drop-item" :class="{ active: pageMode === 1 }" @click="handleSpreadMode(1)"><Button><DoublePage /></Button>Two Pages</div>
        <div class="drop-item" :class="{ active: pageMode === 2 }" @click="handleSpreadMode(2)"><Button><Pagecover /></Button>Book Mode</div>
        <div class="drop-down-divider"></div>
        <div class="drop-item" @click="rotateClockwise"><Button><Rotateright /></Button>Rotate Right</div>
        <div class="drop-item" @click="rotateCounterclockwise"><Button><Rotateleft /></Button>Rotate Left</div>
        
        <Button
          img="icon-header-counter-clockwise"
          title="Rotate Counterclockwise"
          :onClick="rotateCounterclockwise"
        />
        <Button
          img="icon-header-clockwise"
          title="Rotate Clockwise"
          :onClick="rotateClockwise"
        />
      </div>
    </n-popover>
  </div>
</template>

<script setup>
  import { computed, ref } from 'vue'
  import { NPopover } from 'naive-ui'
  import { useViewerStore } from '@/stores/modules/viewer'
  import core from '@/core'

  const popover = ref(null)

  const useViewer = useViewerStore()

  const { item } = defineProps(['item'])
  const scrollMode = computed(() => useViewer.getScrollMode)
  const pageMode = computed(() => useViewer.getPageMode)

  const showDropdown = computed(() => popover.value && popover.value.getMergedShow())

  const handleScrollMode = (mode, modeNum) => {
    useViewer.setScrollMode(mode)
    core.switchScrollMode(modeNum)
    popover.value.setShow(false)
  }
  const handleSpreadMode = (mode) => {
    core.switchSpreadMode(mode)
    popover.value.setShow(false)
    useViewer.setPageMode(mode)
  }

  const rotateCounterclockwise = () => {
    core.rotateCounterclockwise()
    popover.value.setShow(false)

  }
  const rotateClockwise = () => {
    core.rotateClockwise()
    popover.value.setShow(false)
  }
</script>

