<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">
          PATIENT PRESCRIPTION STATUS
        </h4>
      </div>
      <div class="grid grid-cols-2 gap-4">
        <BaseInput ref="inputCondition1" v-model="task.condition1" inputName="Reason for Visit" placeholder="e.g. Hong" />
        <BaseInput ref="inputCondition2" v-model="task.condition2" inputName="When did your symptoms appear?" placeholder="e.g. Gil-dong " />
      </div>
      <div class="grid grid-cols-1 gap-4">
        <BaseInput ref="inputCondition3" v-model="task.condition3" inputName="How bad is your pain?(Circle a number)" placeholder="e.g. 01271970" />
			</div>
      <hr>
      <div class="grid grid-cols-1 gap-4 font-bold">
        I certify that the above information is complete and accurate to the best of my knowledge. I agree to notify this doctor immediately whenever I have changes in my health condition in the future.
			</div>
      <ButtonPrimaryLarge type="submit">
        Update Changes
      </ButtonPrimaryLarge>
    </div>
  </form>
</template>
<script setup>
import { ref, reactive, onBeforeUpdate, onMounted, computed } 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 '@/components/form/BaseTextarea.vue';
import IconCross from '@/components/icons/IconCross.vue';
import ButtonPrimaryLarge from '@/components/buttons/PrimaryLarge.vue';
import ButtonSecondaryLarge from '@/components/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'];
let task = reactive({
        condition1: '',
				condition2: '',
				condition3: '',
})

onMounted(() => {
  task = boardsStore.getTask;
  console.log(task)
  // 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>