<template>
  <form @submit.prevent="onSubmit" class="bg-white dark:bg-dark-grey rounded-lg p-1">
    <div class="p-5 pr-3 flex flex-col gap-6 max-h-[90vh] overflow-y-scroll">
      <div class="flex justify-between items-center">
        <h4 class="text-black dark:text-white font-bold text-lg">
          {{ systemStore.taskForm.edit ? 'Edit Task' : 'Add New Task' }}
        </h4>
      </div>
      <Datepicker v-model="date" range multiCalendars />
      
      <BaseInput ref="inputTitle" v-model="form.task.title" inputName="Title" placeholder="e.g. Take coffee break" />
      <!-- <BaseTextarea v-model="form.task.description" inputName="Description" -->
        <BaseTextarea v-model="form.task.symptom" inputName="Description"
        placeholder="e.g. It’s always good to take a break. This 15 minute break will  recharge the batteries a little." />
      <!-- <div class="flex flex-col gap-3">
        <p class="text-medium-grey text-xs font-bold">Subtasks</p>
        <div ref="errorSubtasks" class="flex items-center justify-between gap-4"
          v-for="(subtask, index) in form.task.subtasks" :key="index">
          <BaseInput :ref="el => { inputs[index] = el }" v-model="subtask.title"
            :placeholder="subtaskPlaceholders[index] ? subtaskPlaceholders[index] : 'Your subtask title...'" />
          <IconCross @click="deleteSubtask(index)" class="cursor-pointer" />
        </div>
        <ButtonSecondaryLarge type="button" @click.stop="addSubtask">+ Add New Subtask</ButtonSecondaryLarge>
      </div> -->
      <div class="flex flex-col gap-2">
        <p class="text-medium-grey text-xs font-bold">Status</p>
        <BaseSelect @onClickOption="updateColumn" :value="columnName" />
      </div>
      <ButtonPrimaryLarge type="submit">
        {{ systemStore.taskForm.edit ? 'Save Changes' : 'Create Task' }}
      </ButtonPrimaryLarge>
    </div>
  </form>
</template>
<script setup>
import { ref, reactive, onBeforeUpdate, onMounted  } from 'vue'
import { useBoardsStore } from '@/store/boards.js';
import { useSystemStore } from '@/store/system.js';
import BaseSelect from '@/components/form/BaseSelect.vue';
import BaseInput from '@/components/form/BaseInput.vue';
import BaseTextarea from '../form/BaseTextarea.vue';
import IconCross from '../icons/IconCross.vue';
import ButtonPrimaryLarge from '../buttons/PrimaryLarge.vue';
import ButtonSecondaryLarge from '../buttons/SecondaryLarge.vue';
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

const boardsStore = useBoardsStore();
const systemStore = useSystemStore();
const columnName = ref('')

const inputTitle = ref(null)
const inputs = ref([])
const date = ref();
const searchColumnName = ['Name', 'Phone'];

onMounted(() => {
  const startDate = new Date();
  const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
  date.value = [startDate, endDate];
})

const form = reactive({
  task: {
    title: '',
    description: '',
    subtasks: [{ title: '', isCompleted: false }, { title: '', isCompleted: false }]
  },
  column: 0
})
const subtaskPlaceholders = {
  0: 'e.g. Make coffee',
  1: 'e.g. Drink coffee & smile'
}
const deleteSubtask = (index) => {
  if (form.task.subtasks.length === 2) {
    form.task.subtasks[index].title = ''
    form.task.subtasks[index].isCompleted = false
  } else {
    form.task.subtasks.splice(index, 1)
  }
}
const addSubtask = () => {
  form.task.subtasks.push({ title: '', isCompleted: false })
}
const onSubmit = () => {
  if (validate()) {
    if (systemStore.taskForm.edit) {
      boardsStore.saveTaskChanges({ task: form.task, column: form.column })
    } else {
      boardsStore.getCurrentBoard[form.column].tasks.push(form.task)
    }
    systemStore.hideOverlay()
  }
}
const validate = () => {
  let valid = true
  if (form.task.title.trim().length === 0) {
    valid = false
    inputTitle.value.error = true
  }
  inputs.value.forEach((e, index) => {
    if (form.task.subtasks[index]?.title.trim().length === 0) {
      valid = false
      e.error = true
    }
  })
  return valid
}
const updateColumn = ({ index, name }) => {
  console.log(index);
  console.log(name);
  form.column = index
  columnName.value = name
}

//EDIT MODE
if (systemStore.taskForm.edit) {
  form.task = JSON.parse(JSON.stringify(boardsStore.getTask))
  form.column = JSON.parse(JSON.stringify(boardsStore.selectedColumn))
  columnName.value = JSON.parse(JSON.stringify(boardsStore.getColumnsNames[boardsStore.selectedColumn]))
} else {
  columnName.value = JSON.parse(JSON.stringify(boardsStore.getColumnsNames[0]))
}

onBeforeUpdate(() => {
  inputs.value = []
})
</script>