<template>
  <!-- <SideBar /> -->
  <section class="relative pt-16 pb-32 flex content-center items-center justify-center">
    <div class="grid grid-rows-4 grid-flow-col gap-10">
      <button @click="addTask" type="button" v-bind="$attrs" 
        class="cursor-pointer p-4 pr-5 fix bg-main-purple hover:bg-main-purple-light rounded-r-full">
        <img src="@/assets/icons/icon-add-task-mobile.svg" alt="">
      </button>
      <button @click="addTask" type="button" v-bind="$attrs" 
        class="cursor-pointer p-4 pr-5 fix bg-main-purple hover:bg-main-purple-light rounded-r-full">
        <img src="@/assets/icons/icon-check.svg" alt="">
      </button>
    </div>
    <div class="container mx-auto px-1 lg:px-4">
      <div v-dragscroll:nochilddrag class="relative h-full w-screen min-h-[calc(100vh-64px)] max-h-[calc(100vh-64px)] overflow-auto bg-light-grey dark:bg-very-dark-grey transition-all">
        <div data-dragscroll class="mx-auto w-11/12 pt-16 pb-24 ">
          <div data-dragscroll v-if="boardsStore.getCurrentBoard.length" class="flex">
            <Board data-dragscroll />
          </div>
          <NoBoards v-else-if="boardsStore.boards.length === 0" />
          <EmptyBoard v-else />
        </div>
      </div>
    </div>
    <bgOverlay data-no-dragscroll />
    <!-- <div class="absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] z-10 max-w-xs w-11/12 sm:max-w-md"> -->
    <div class="absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] z-10 max-w-max w-11/12">
    <!-- <div class="absolute top-16 z-10 max-w-max w-11/12 lg:w-8/12"> -->
      
      <TaskView v-if="systemStore.taskView" />
      <TaskForm v-if="systemStore.taskForm.visible" />
      <Delete v-if="systemStore.delete.visible" />
      <BoardForm v-if="systemStore.boardForm.visible" />
      <SidebarMobile v-if="systemStore.sidebarMobile" />
    </div>
  </section>
  
</template >
  
<script>
import EmptyBoard from '@/components/board/Empty.vue';
import Board from '@/components/board/Board.vue'
import bgOverlay from '@/components/utils/bgOverlay.vue';
import TaskView from '@/components/manager/TaskView.vue'
import TaskForm from '@/components/manager/TaskForm.vue';
import Delete from '@/components/manager/Delete.vue';
import BoardForm from '@/components/manager/BoardForm.vue';
import PDFForm from '@/components/manager/PDFForm.vue';

import SideBar from '@/components/manager/Sidebar.vue';
import SidebarMobile from '@/components/manager/SidebarMobile.vue';
import ShowSidebar from '@/components/manager/sidebar/ShowSidebar.vue';
import IconBoard from '@/components/icons/IconBoard.vue';
import dayjs from 'dayjs'
import { mapState } from "vuex";

import { useBoardsStore } from '@/store/boards.js';
import { useSystemStore } from '@/store/system.js';
import NoBoards from '@/components/board/NoBoards.vue';
import AddNewColumn from '@/components/board/AddNewColumn.vue';
import Dropdown from '@/components/manager/Dropdown.vue';
import IconArrowDown from '@/components/icons/IconArrowDown.vue';
import IconArrowUp from '@/components/icons/IconArrowUp.vue';
import PrimarySmall from '@/components/buttons/PrimarySmall.vue';
import AddButtonMobile from '@/components/buttons/AddTaskMobile.vue'
import ManagementService from "@/services/management.service";

// import PDFViewer from '@/components/appointment/PDFViewer.vue'

export default {
  name: "Management",
  data() {
    return {
      content: "",
      boardsStore: useBoardsStore(),
      systemStore: useSystemStore(),
    };
  },
  async mounted() {
    await this.boardsStore.load();
    console.log(this.boardsStore.getCurrentBoard);
    // dayjs().format("YYYY-MM-DD HH:mm:ss").day(),
    // this.boardsStore.boards = this.boardsStore.getCurrentBoard;
    // this.boardsStore.boards = this.boardsStore.getCurrentBoard[0].tasks.filter((item) => ( ( new Date(item.startdt).getTime() - new Date().getTime() ) / (1000 * 3600 * 24) ) == 0 );

    // this.boardsStore.getCurrentBoard.forEach((item, index) => {
    //   if(index === 0) {
    //     let validTasks = new Array();
    //     let inValidTasks = new Array();
    //     item.tasks.forEach((subItem, subIndex) => {
    //       console.log(subItem.startdt);
    //       console.log(dayjs().get('date'));
    //       console.log(dayjs(subItem.startdt).get('date'));
    //       if(dayjs().isSame(dayjs(subItem.startdt), 'day')) validTasks.push(subItem);
    //       else inValidTasks.push(subItem);
    //     })
    //     this.boardsStore.boards.push({name: item.name, tasks: validTasks});
    //     this.boardsStore.idleAppointments.push({name: item.name, tasks: inValidTasks});
    //   }
    //   else this.boardsStore.boards.push(item);
    // })

    // const startDay = new Date(props.task.startdt);
    // // To calculate the no. of days between two dates
    // var Difference_In_Days = ( startDay.getTime()-new Date().getTime() ) / (1000 * 3600 * 24);

    this.$nextTick(function () {
      this.$refs.target?.scrollIntoView();
    });

  },
  unmounted(){
    this.systemStore.hideOverlay();
  },
  methods: {
    groupBy: function (array, property) {
        return array.reduce((memo, x) => {
            memo[x[property]] ||= [];
            memo[x[property]].push(x);
            return memo;
        }, {});
    },
    addTask: function () {
      this.systemStore.overlay = true
      this.systemStore.taskForm = { edit: false, visible: true }
    },
    editTask: function () {
      this.systemStore.overlay = true
      this.systemStore.boardForm = { edit: true, visible: true }
    },
    deleteTask: function () {
      this.systemStore.overlay = true
      this.systemStore.delete = { board: true, visible: true }
    },
    
  },
  components: {
    TaskView,
    TaskForm,
    Delete,
    BoardForm,
    SidebarMobile,
    EmptyBoard,
    bgOverlay,
    NoBoards,
    Board,
    Dropdown,
    AddButtonMobile,
    PrimarySmall,
    PDFForm,
    SideBar,
    ShowSidebar,
    dayjs
    // PDFViewer
  },
  computed: {
    ...mapState(["isRTL", "isAbsolute"]),
    currentUser() {
      return this.$store.state.auth.user;
    },
  },

};

</script>

<style>
/* body {
    max-height: 100vh;
    overflow: hidden;
    transition: color 0.5s, background-color 0.5s;
    line-height: 1.6;
    font-family: "Plus Jakarta Sans";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 0.94rem;
  } */
/* #app {
  display: flex;
  flex-direction: column;
} */

/* ===== Scrollbar CSS ===== */
/* Firefox */
/* * {
  scrollbar-width: auto;
  scrollbar-color: #635fc7 #ffffff;
} */


/* Chrome, Edge, and Safari */
/* *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #ffffff;
}

*::-webkit-scrollbar-thumb {
  background-color: #635fc7;
  border-radius: 10px;
  border: 3px solid #ffffff;
}

.dark * {
  scrollbar-width: auto;
  scrollbar-color: #635fc7 #2b2c37;
}

.dark *::-webkit-scrollbar-track {
  background: #2b2c37;
}

.dark *::-webkit-scrollbar-thumb {
  background-color: #635fc7;
  border-radius: 10px;
  border: 3px solid #2b2c37;
} */
</style>