<template>
  <div class="carousel" ref="fileCarousel"> 
    <a-page-header :style="{ visibility: idle ? 'hidden' : 'visible' }">
      <template #extra>
        <a-button type="text" class="action-button" :onclick="toggle" :icon="h(isFullscreen? FullscreenExitOutlined: FullscreenOutlined)" />
        <a-button type="text" class="action-button" :onclick="redirectBack" :icon="h(CloseOutlined)" />
      </template>
    </a-page-header>
    <a-row class="slider">
      <a-col :span="2" class="centered-vertically">
        <div class="custom-slick-arrow slick-arrow slick-prev centered" @click="next(-1)" style="left: 10px; z-index: 1">
          <LeftOutlined v-show="!idle" />
        </div>
      </a-col>
      <a-col :span="20" class="centered">
        <FileViewer v-if="!documentStore.loading" :visibleImg="visible" @visibleImg="setVisible" :type="fileType"></FileViewer>
      </a-col>
      <a-col :span="2" class="centered-vertically right">
        <div class="custom-slick-arrow slick-arrow slick-prev centered" @click="next(1)" style="right: 10px">
          <RightOutlined v-show="!idle" />
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { h, ref, watchEffect } from 'vue'
import { useDocumentStore } from '@/stores/documents'
import { useIdle, useFullscreen } from '@vueuse/core'
import { LeftOutlined, RightOutlined, FullscreenOutlined, FullscreenExitOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { getFileType } from '@/utils'
import Router from '@/router/index';
import FileViewer from './FileViewer.vue';

const fileCarousel = ref<HTMLElement | null>(null)
const { isFullscreen, toggle } = useFullscreen(fileCarousel)
const visible = ref<boolean>(false);
const documentStore = useDocumentStore()
const fileType = ref<string| undefined>(undefined);
watchEffect(() => {
  if(documentStore.mainDocument[0] && documentStore.mainDocument[0].type === 'file'){
    const fileExt =  documentStore.mainDocument[0].ext 
    fileType.value = getFileType(fileExt)
  }
})
function setVisible(value: boolean) {
  visible.value = value;
}

const { idle } = useIdle(2000)

function redirectBack() {
  const currentPath = Router.currentRoute.value.path;
  const pathParts = currentPath.split('/').filter(part => part); // Remove empty parts
  // Ensure there's always at least one part in the path
  if (pathParts.length <= 1) {
    // If it's empty, set it to the base URL
    pathParts[0] = '/';
  } else {
    pathParts.pop();
  }
  const newPath = pathParts.join('/');
  Router.push(newPath);
}
function next(direction: number){
  const path = decodeURIComponent(new String(Router.currentRoute.value.path) as string)
  const name = documentStore.getNextDocumentInRoute(direction, path)
  let nextFileLocation : string[] | string = path.split('/')
  nextFileLocation.pop()
  nextFileLocation.push(name)
  nextFileLocation = nextFileLocation.join('/')
  Router.push(nextFileLocation)
}


</script>
<style scoped>
:deep(.slick-arrow.custom-slick-arrow) {
  width: 60px;
  height: 60px;
  font-size: 60px;
  color: var(--primary-color);
  transition: ease-in all 0.3s;
  opacity: 0.3;
  z-index: 1;
}

:deep(.slick-arrow.custom-slick-arrow:before) {
  display: none;
}

:deep(.slick-arrow.custom-slick-arrow:hover) {
  color: var(--primary-color);
  opacity: 1;
}

.slider {
  height: 80vh;
  background-color: inherit;
}

.centered {
  display: flex;
  justify-content: center;
}

.centered-vertically {
  display: flex;
  align-items: center;
}

.right {
  flex-direction: row-reverse;
}

.action-button {
  padding: 0;
  font-size: 1.5em;
  opacity: 0.5;
  color: var(--secondary-color);

  &:hover {
    color: var(--blue-color);
  }
}

.ant-page-header {
  padding: 0;
}
.carousel{
  margin: 0;
  height: inherit;
  background-color: var(--table-background);
}
</style>
