<template>
  <Draggable v-if="item">
    <div class="cursor-move my-2 mx-4 rounded-lg shadow-md bg-gray-100 dark:bg-gray-800 hover:border-2 border-primary">
      <div v-if="item.loading" class="flex space-x-2 bg-gray-50 text-gray-900 dark:text-gray-200 dark:bg-gray-900 px-4 py-2 rounded-t-lg">
        <ArrowPathIcon class="w-6 h-6 animate-spin" viewBox="0 0 24 24"></ArrowPathIcon> 
        <span>Processing...</span>
      </div>

        <!-- <div class="stat">
          <div class="stat-figure text-primary">
            <div class="inline-flex bg-gray-50 text-gray-900">
            </div>
          </div>
          <div class="stat-title">
            <div class="flex items-center justify-between">
              <div class="badge badge-neutral">{{ dayFormat }}</div>
              <div class="flex items-center justify-end">
                <div class="flex items-center">
                  <button class="btn btn-xs btn-outline btn-primary mx-1" @click="onViewClickTask(item)">history</button>
                  <button class="btn btn-xs btn-outline btn-secondary" @click="onExamineClickTask(item)">diagnosis</button>
                </div>
              </div>
            </div> 
          </div>
          <br>
          <div class="stat-value text-primary text-2xl">{{ item.patient.name }}</div>
          <div class="stat-desc text-lg mt-1">{{ item.description }}</div>
        </div> -->

      <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
        <div class="flex-auto p-3">
          <div class="flex flex-wrap items-center justify-between">
            <div class="badge badge-neutral">{{ dayFormat }}</div>
            <div class="flex items-center justify-end">
              <div class="flex items-center">
                <button class="btn btn-xs btn-outline btn-primary mx-1" @click="onViewClickTask(item)">history</button>
                <button class="btn btn-xs btn-outline btn-secondary" @click="onExamineClickTask(item)">diagnosis</button>
              </div>
            </div>
            
            <!-- <div class="relative w-full max-w-full flex-grow flex-1">
              <h5 class="text-gray-900 uppercase font-bold text-xs">
                <div class="badge badge-neutral">{{ dayFormat }}</div>
              </h5>
              <span class="font-semibold text-lg text-blueGray-700">{{ item.patient.name }}</span>
            </div>
            <div class="relative w-auto pl-4 flex-initial justify-end">
              <div class="text-center inline-flex items-center justify-center w-12 h-12 bg-gray-50">
                <button class="btn btn-xs btn-outline btn-primary" @click="onViewClickTask(item)" >
                  <ListBulletIcon class="h-6 w-6"></ListBulletIcon>
                </button>
              </div>
              <div class="text-center inline-flex items-center justify-center w-12 h-12 bg-gray-50">
                <button class="btn btn-xs btn-outline btn-secondary" @click="onExamineClickTask(item)" >
                  <EyeDropperIcon class="h-6 w-6"></EyeDropperIcon>
                </button>
              </div>
            </div> -->

          </div>
          <div class="relative w-full max-w-full flex-grow flex-1">
              <span class="font-semibold text-lg text-blueGray-700">{{ item.patient.lastName }} {{ item.patient.firstName }}</span>
            </div>
          <div class="relative w-full pt-2 max-w-full flex-grow flex-1">
            <span class="text-sm text-blueGray-700">{{ item.description }}</span>
          </div>
        </div>
      </div>

    </div>
  </Draggable>
</template>

<script>
import { useBoardsStore } from '@/store/boards.js';
import { useSystemStore } from '@/store/system.js';

import { Draggable } from 'vue3-smooth-dnd'
import { ArrowPathIcon, EyeDropperIcon, ListBulletIcon } from '@heroicons/vue/24/outline'
export default {
  name: "KanbanItem",
  components: { Draggable, ArrowPathIcon, EyeDropperIcon, ListBulletIcon },
  data(){ 
    return {
      boardsStore: useBoardsStore(),
      systemStore: useSystemStore(),
    }
  },
  props: {
    item: Object,
    columnIndex: Number,
    taskIndex: Number,
  },
  computed: {
    dayFormat() {
      // return new Date(this.item.startdt).toTimeString().split(' ')[0];
      return new Date(this.item.startdt).toLocaleDateString() + ' ' + new Date(this.item.startdt).toTimeString().split(' ')[0];
    }
  },
  methods: {
    onViewClickTask (task) {
      console.log(task);
      this.boardsStore.selectedColumn = this.columnIndex;
      this.boardsStore.selectedTask = this.taskIndex;
      this.systemStore.historyView = true;
      this.systemStore.overlay = true;
    },
    onExamineClickTask (task) {
      console.log(task);
      this.boardsStore.selectedColumn = this.columnIndex;
      this.boardsStore.selectedTask = this.taskIndex;
      
      if(this.columnIndex === 0) this.systemStore.appointmentTaskForm = { visible: true, edit: false };
      else if(this.columnIndex === 1) this.systemStore.diagnosisTaskForm = { visible: true, edit: false };
      else if(this.columnIndex === 2) this.systemStore.prescriptionTaskForm = { visible: true, edit: false };
      else if(this.columnIndex === 3) this.systemStore.completionTaskForm = { visible: true, edit: false };
      this.systemStore.overlay = true;

    }
  }
};
</script>