<template>
  <div class="container pt-4 2xl:max-w-none">
    <!-- Recently Used -->
    <section class="mb-4">
      <h2 class="font-bold py-4 mb-4 border-b border-neutral-500">Recently Used</h2>
      <!-- card group 最多六個-->
      <ul class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[192px] scrollbar pb-4">
        <!-- card item v-for -->
        <li class="w-[216px] min-w-[216px] h-[168px] p-4 border rounded border-neutral-300  hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name">
          <div class="">
            <span class="material-symbols-outlined mb-2 text-[32px] block">
              {{ file.icon }}
            </span>
            <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
              {{ file.name }}
            </h3>
            <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
              {{ file.parentLog }}
            </p>
          </div>
          <p class="text-sm text-neutral-500">
            {{ file.accessed_at }}
          </p>
        </li>
      </ul>
    </section>
    <section>
      <div class="py-4 mb-4 border-b flex justify-between items-center border-neutral-500">
        <h2 class="font-bold">All Files</h2>
        <ul class="flex items-center">
          <li class="mr-4 cursor-pointer" @click="switchListOrGrid = false">
            <IconList class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconList>
          </li>
          <li class="cursor-pointer" @click="switchListOrGrid = true">
            <IconGrid class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconGrid>
          </li>
        </ul>
      </div>
      <!-- All Files type of List -->
      <div class="overflow-y-scroll overflow-x-hidden scrollbar -mx-2 max-h-[calc(100vh_-_480px)]" v-if="!switchListOrGrid">
        <DataTable :value="allFiles" dataKey="id" tableClass="w-full !border-separate !border-spacing-x-2 text-sm cursor-pointer" breakpoint="0" @row-dblclick="enterDiscover($event.data)">
          <Column field="name" header="Name" bodyClass="font-medium fileName"  sortable></Column>
          <Column field="parentLog" header="Dependency" bodyClass="text-neutral-500" sortable></Column>
          <Column field="fileType" header="File Type" bodyClass="text-neutral-500 fileType" sortable></Column>
          <Column field="owner.name" header="Owner" bodyClass="text-neutral-500" sortable></Column>
          <Column field="updated_at" header="Last Update" bodyClass="text-neutral-500" sortable></Column>
        </DataTable>
      </div>
      <!-- All Files type of grid -->
      <ul class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)] scrollbar" v-else>
      <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer"
        v-for="(file, index) in allFiles" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name">
          <div>
            <span class="material-symbols-outlined mb-2 text-[32px] block">
              {{ file.icon }}
            </span>
            <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
              {{ file.name }}
            </h3>
            <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
              {{ file.parentLog }}
            </p>
          </div>
          <p class="text-sm text-neutral-500">
            {{ file.updated_at }}
          </p>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
  import { storeToRefs } from 'pinia';
  import filesStore from '@/stores/files.js';
  import AllMapDataStore from '@/stores/allMapData.js';
  import IconDataFormat from '@/components/icons/IconDataFormat.vue';
  import IconRule from '@/components/icons/IconRule.vue';
  import IconsFilter from '@/components/icons/IconsFilter.vue';
  import IconFlowChart from '@/components/icons/IconFlowChart.vue';
  import IconVector from '@/components/icons/IconVector.vue';
  import IconList from '@/components/icons/IconList.vue';
  import IconGrid from '@/components/icons/IconGrid.vue';

  export default {
    data() {
      return {
        switchListOrGrid: false,
      }
    },
    setup() {
      const store = filesStore();
      const allMapDataStore = AllMapDataStore();
      const { createFilterId, baseLogId } = storeToRefs(allMapDataStore);

      return { store, allMapDataStore, createFilterId, baseLogId }
    },
    components: {
      IconDataFormat,
      IconRule,
      IconsFilter,
      IconFlowChart,
      IconVector,
      IconList,
      IconGrid,
    },
    computed: {
      /**
       * Read allFiles
       */
      allFiles: function() {
        if(this.store.allFiles.length !== 0){
          let sortFiles = Array.from(this.store.allFiles);
          sortFiles.sort((x,y) => new Date(y.updated_base) - new Date(x.updated_base));
          return sortFiles;
        }
      },
      /**
       * 時間排序，如果沒有 accessed_at 就不加入 data
       */
      recentlyUsedFiles: function() {
        let recentlyUsedFiles = Array.from(this.store.allFiles);
        recentlyUsedFiles = recentlyUsedFiles.filter(item => item.accessed_at !== null);
        recentlyUsedFiles.sort((x, y) => new Date(y.accessed_base) - new Date(x.accessed_base));
        return recentlyUsedFiles;
      },
    },
    methods: {
      /**
       * 選擇該 files 進入 Discover/Compare/Design 頁面
       * @param {object} file
       */
      enterDiscover(file){
        let type;
        let fileId;
        let params;

        switch (file.fileType) {
          case 'Log':
            this.createFilterId = null;
            this.baseLogId = file.id;
            fileId = file.id;
            type = 'log';
            params = { type: type, fileId: fileId };
            this.$router.push({name: 'Map', params: params});
            // this.$router.push({name: 'Map', params: params, query: params});
            break;
          case 'Filter':
            this.createFilterId = file.id;
            this.baseLogId = file.log.id;
            fileId = file.id;
            type = 'filter';
            params = { type: type, fileId: fileId };
            this.$router.push({name: 'Map', params: params});
            // this.$router.push({name: 'Map', params: params, query: params});
            break;
          default:
            break;
        }
      }
    },
    mounted() {
      this.store.fetchEventLog();
      this.store.fetchFilter();
    }
  }
</script>

<style scoped>
:deep(thead) {
  @apply sticky top-0 bg-neutral-10
}
:deep(table th) {
  @apply border-b !border-neutral-500 p-3 text-left font-black !bg-neutral-10 whitespace-nowrap break-keep overflow-hidden text-ellipsis
}
:deep(table td) {
  @apply border-b border-neutral-300 p-3 whitespace-nowrap break-keep overflow-hidden text-ellipsis
}
:deep(tbody > tr) {
  @apply duration-300 cursor-pointer hover:bg-primary/10 focus:!outline-none
}
:deep(.p-sortable-column) {
  @apply focus:!shadow-none !text-neutral-900
}
:deep(.p-sortable-column-icon) {
  @apply !text-[#6c757d]
}
</style>
