<template>
  <section class="relative pt-16 pb-32 flex content-center items-center justify-center">
    <div class="container mx-auto px-1 lg:px-4">
      <div class="flex flex-wrap justify-center text-center pt-4">
        <div class="w-full lg:w-6/12 px-4">
          <h2 class="text-2xl font-semibold">Management</h2>
        </div>
        <div class="card-title flex ">
          <!-- <PDFViewer/> -->
          <PrimarySmall @click="pdfTask" >+ PDF</PrimarySmall>
          <PrimarySmall @click="addTask" >+ Task</PrimarySmall>
          <!-- <Dropdown target="Board" @onClickEdit="editTask" @onClickDelete="deleteTask" /> -->
        </div>
      </div>
      <!-- <div class="card flex flex-wrap items-center pt-8">
				<div class="card-body w-full md:w-12/12 px-4 mr-auto ml-auto">
					<div class="card-title flex flex-wrap justify-between">
						<div class="text-xl font-semibold">Management List</div>
						<PrimarySmall @click="addTask" >+ Task</PrimarySmall>
            <Dropdown target="Board" @onClickEdit="editTask" @onClickDelete="deleteTask" />
					</div>
					<Board data-dragscroll />
				</div>
			</div> -->
      <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 />
            <!-- <AddNewColumn class="hidden md:flex"/> -->
          </div>
          <NoBoards v-else-if="boardsStore.boards.length === 0" />
          <EmptyBoard v-else />
        </div>
      </div>
    </div>
    <bgOverlay data-no-dragscroll />
    <div class="top-1/2 z-10">
      <PDFForm v-if="systemStore.pdfForm.visible" />
    </div>
    <!-- <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>
  <!-- <ShowSidebar v-if="!systemStore.SideBar" /> -->


  <!-- <div class="flex w-full mt-16">
      <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">
      <button @click="addTask" type="button" v-bind="$attrs" :disabled="!boardsStore.getColumns"
        class="fixed bottom-8 left-0 cursor-pointer p-4 pr-5 bg-main-purple hover:bg-main-purple-light rounded-r-full">
        <img src="@/assets/icons/icon-add-task-mobile.svg" alt="">
      </button>
        <div data-dragscroll class="mx-auto w-11/12 pt-6 pb-24 ">
          <div data-dragscroll v-if="boardsStore.getColumns" class="flex">
            <Board data-dragscroll />
          </div>
          <NoBoards v-else-if="boardsStore.boards.length === 0" />
          <EmptyBoard v-else />
        </div>
      </div>
    </div>
    <ShowSidebar v-if="!systemStore.SideBar" /> -->
  
</template >
  
<script>
import EmptyBoard from '@/components/board/Empty.vue';
import Board from '@/components/board/Board.vue'
import bgOverlay from '@/components/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 { 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 PDFViewer from '@/components/appointment/PDFViewer.vue'

export default {
  name: "Management",
  data() {
    return {
      content: "",
      boardsStore: useBoardsStore(),
      systemStore: useSystemStore(),
    };
  },
  async mounted() {
    console.log(this.currentUser);

    // this.boardsStore.$subscribe((mutations, state) => {
    //   localStorage.setItem('data', JSON.stringify(state))
    // })
    // const storageData = localStorage.getItem("data")
    // console.log(storageData);

    // if (storageData === null) {
      await this.boardsStore.load();
      console.log(this.boardsStore.getCurrentBoard);
      this.boardsStore.boards = this.boardsStore.getCurrentBoard;
      // await ManagementService.getManagementByUser(this.currentUser).then(
      //   (response) => {
      //     console.log(response);
      //     this.boardsStore.boards = response;
      //     console.log(this.boardsStore.boards);

      //   },
      //   (error) => {
      //     this.content =
      //       (error.response &&
      //         error.response.data &&
      //         error.response.data.message) ||
      //       error.message ||
      //       error.toString();
      //   }
      // );
      // const jsonData = await import("@/assets/json/data.json")
      // console.log(jsonData);
      // this.boardsStore.boards = jsonData.boards;
      // console.log(this.boardsStore.boards);
    // } else {
    //   this.boardsStore.$state = JSON.parse(storageData)
    // }

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

  },
  methods: {
    addTask: function () {
      this.systemStore.overlay = true
      this.systemStore.taskForm = { edit: false, visible: true }
    },
    createNewBoard: function () {
      this.systemStore.overlay = true
      this.systemStore.boardForm = { visible: true, edit: false }
    },
    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 }
    },
    pdfTask: function () {
      this.systemStore.overlay = true
      this.systemStore.pdfForm.visible = true
    },
    showMobileBar: function () {
      this.systemStore.sidebarMobile = true;
      this.systemStore.overlay = true
    },
    
  },
  components: {
    TaskView,
    TaskForm,
    Delete,
    BoardForm,
    SidebarMobile,
    EmptyBoard,
    bgOverlay,
    NoBoards,
    Board,
    Dropdown,
    AddButtonMobile,
    PrimarySmall,
    PDFForm
    // 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>