<template>
  <resizable-drawer
    v-model="drawerOpen"
    side="right"
    :default-width="width"
    :min-width="400"
    :max-width="800"
    :overlay="rightDrawerHoverShow"
    class="right-drawer"
    :class="{'hover-show shadow-2': rightDrawerHoverShow, 'right-drawer-show': rightDrawerShow}"
    @leave="emit('leave', $event)"
    @resize="onResize">
    <section class="col-12 fit bg-secondary side-bar">
      <q-splitter v-model="splitterPercent"
                  :limits="[0, 80]"
                  separator-class="bg-accent"
                  :separator-style="`height: ${splitterPercent ? 8 : 0}px;`"
                  horizontal
                  reverse>
        <template #before>
          <reader-side-panel main />
        </template>

        <template #after>
          <reader-side-panel v-if="false" />
        </template>
      </q-splitter>
    </section>
  </resizable-drawer>
</template>

<script setup lang="ts">
import {computed, onBeforeMount, ref, watch} from 'vue'
import ResizableDrawer from 'core/components/layout/ResizableDrawer.vue'
import ReaderSidePanel from 'src/components/reader/ReaderSidePanel.vue'

import useReader from 'src/hooks/useReader'

const emit = defineEmits(['leave'])
const { rightDrawer, rightDrawerShow, rightDrawerHoverShow, setRightDrawerWidth } = useReader()

const width = ref(400)
const drawerOpen = ref(true)
const splitterPercent = ref(0)

function onResize(value: number) {
  setRightDrawerWidth(value)
}

watch(() => rightDrawerShow.value, (newValue) => {
  drawerOpen.value = newValue
})

watch(() => rightDrawerHoverShow.value, (newValue) => {
  drawerOpen.value = newValue
})

watch(() => rightDrawer.value.split, (newValue) => {
  console.log('split', newValue)
  splitterPercent.value = newValue ? 50 : 0
})

onBeforeMount(() => {
  drawerOpen.value = rightDrawerShow.value
  splitterPercent.value = rightDrawer.value.split ? 50 : 0
  width.value = rightDrawer.value.width
})

</script>

<style lang="scss">
.q-drawer:has(.right-drawer.hover-show) {
  //top: 10px;
  //bottom: 10px;
  //right: 10px;
  //border-radius: 6px !important;
  //
  //.q-drawer__content {
  //  border-radius: 6px !important;
  //  box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
  //}
  border-radius: 12px 0 0 12px !important;
}

.right-drawer {
  .side-bar {
    //padding-left: 8px;
    .q-splitter {
      height: 100vh;
    }
    overflow: hidden;

    header {
      height: 40px;
      padding: 0 8px;
    }

    .o-scroll-wrapper {
      top: 40px;
    }
  }

  .drawer-separator {
    width: 1px;
    background: var(--q-dark);

    &:hover, &.is-resizing {
      //background: var(--q-dark)!important;
      right: 0;
      left: -1px;
    }
  }

  &.hover-show {
    .side-bar {
      padding-left: 0;
    }
    .drawer-separator {
      width: 0;
    }
  }
}

.q-drawer--right:has(.hover-show) {
  //box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
  .side-bar {
    background: var(--q-secondary) !important;
  }
}

.electron {
  .right-drawer {
    .side-bar .reader-side-panel {
      .o-title-bar {
        height: 28px !important;

        .o-title-bar-overlay {
          height: 28px;
          min-height: 28px;
        }
        .q-btn {
          min-height: 28px;
        }
      }
      .o-scroll-wrapper.with-title-bar {
        //top: 68px;
      }
    }
  }
}
</style>
