<template>
  <div
    class="right-panel-page"
    :class="{ closed: !isOpen, mobile: isMobileDevice }"
    :style="{ height: isMobileDevice ? '70%' : isHeaderDisabled ? '100%' : 'calc(100% - 44px)'}"
    >
    <Close v-if="isMobileDevice" class="close-button" @click="closePanel" />
    <div class="sidebar-title">{{ $t('header.viewSetting') }}</div>
    <div class="mode-container">
      <div class="mode-item">
        <h2>{{ $t('pageModePanel.displayMode') }}</h2>
        <div class="mode-tabs">
          <Button :class="{ active: pageMode === 0 }" @click="handleSpreadMode(0)" :title="$t('pageModePanel.singlePage')"><SinglePage /></Button>
          <Button :class="{ active: pageMode === 1 }" @click="handleSpreadMode(1)" :title="$t('pageModePanel.twoPages')"><DoublePage /></Button>
          <Button :class="{ active: pageMode === 2 }" @click="handleSpreadMode(2)" :title="$t('pageModePanel.coverMode')"><Pagecover /></Button>
        </div>
      </div>
      <div class="mode-item">
        <h2>{{ $t('pageModePanel.splitView') }}</h2>
        <div class="mode-tabs">
          <Button :class="{ active: scrollMode === 'Vertical' }" @click="handleScrollMode('Vertical', 0)" :title="$t('pageModePanel.vertical')"><VerticalScrolling /></Button>
          <Button :class="{ active: scrollMode === 'Horizontal' }" @click="handleScrollMode('Horizontal', 1)" :title="$t('pageModePanel.horizontal')"><HorizontalScrolling /></Button>
        </div>
      </div>
      <div class="mode-item">
        <h2>{{ $t('pageModePanel.themes') }}</h2>
        <div class="mode-tabs">
          <Button @click="handleThemeMode('Light')" :class="{ active: themeMode === 'Light' }" :title="$t('header.light')">
            <Light />
          </Button>
          <Button @click="handleThemeMode('Dark')" :class="{ active: themeMode === 'Dark' }" :title="$t('header.dark')">
            <Dark />
          </Button>
        </div>
      </div>
    </div>
  </div>
</template>

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

  const { isHeaderDisabled } = defineProps(['isHeaderDisabled'])
  const useViewer = useViewerStore()
  const useDocument = useDocumentStore()
  const isOpen = computed(() => useViewer.isElementOpen('pageModePanel'))
  
  const scrollMode = computed(() => useViewer.getScrollMode)
  const pageMode = computed(() => useViewer.getPageMode)
  const themeMode = computed(() => useViewer.getThemeMode)
  const activeTool = computed(() => useDocument.getActiveTool)

  watch(isOpen, (newValue, oldValue) => {
    if (newValue && activeTool.value === 'cropPage') {
      useDocument.setToolState('')
    }
  })

  const handleScrollMode = (mode, modeNum) => {
    useViewer.setScrollMode(mode)
    core.switchScrollMode(modeNum)
  }

  const handleSpreadMode = (mode) => {
    core.switchSpreadMode(mode)
    useViewer.setPageMode(mode)
  }
  
  const handleThemeMode = (mode) => {
    if (mode === themeMode.value) return
    useViewer.setThemeMode(mode)
  }

  const closePanel = () => {
    useViewer.closeElement('pageModePanel')
  }
</script>

<style lang="scss">
  .right-panel-page {
    position: fixed;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    height: calc(100% - 44px);
    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%);
    }
    .sidebar-title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
      font-size: 14px;
      font-weight: 700;
      color: var(--c-right-side-header-text);
      background-color: var(--c-side-header-bg);
      border-bottom: 1px solid var(--c-side-header-border);
    }
    .mode-container {
      padding: 0 20px 0 16px;
    }
    .mode-item {
      padding: 26px 0 7px;
      & + .mode-item {
        border-top: 1px solid var(--c-side-header-border);
      }
      h2 {
        margin: 0 0 18px;
        font-size: 14px;
        line-height: 16px;
      }
    }
    .mode-tabs {
      display: flex;
      align-items: center;
      .button {
        padding: 6px 13px;
        border-radius: 6px;
        color: var(--c-tool-right-page);
        &.active {
          color: var(--c-tool-right-page-active);
        }
      }
    }
  }

  .right-panel-page.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;
      top: 10px;
      right: 14px;
    }

    .sidebar-title {
      height: 36px;
    }
  }
  
  @media screen and (max-width: 640px) {
    .right-panel-page {
      width: 100vw;
    }
  }
  @media screen and (min-width: 641px) {
    .right-panel-page {
      width: 260px;
    }
  }
</style>
