<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 CONDITION
        </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-2 gap-4">
        <BaseInput ref="inputCondition3" v-model="task.condition3" inputName="How bad is your pain?(Circle a number)" placeholder="e.g. 01271970" />
        <BaseInput :isRequired=false v-model="task.condition4" inputName="Type of pain:" placeholder="562-222-2842" />
			</div>
      <div class="grid grid-cols-2 gap-4">
        <BaseInput :isRequired=false v-model="task.condition5" inputName="How often do you have this pain?" placeholder="562-222-2842" />
        <BaseInput :isRequired=false v-model="task.condition6" inputName="Does it interfere with your" placeholder="medihandacu@gmail.com" />
      </div>
      <div class="grid grid-cols-2 gap-4">
        <BaseInput :isRequired=false v-model="task.condition7" inputName="Activities or movements that are painful to perform" placeholder="" />
        <BaseInput :isRequired=false v-model="task.condition8" inputName="What treatement have you had for this condition in the past?(Surgery, Medications, Injections, Therapy, Chiropractic)" placeholder="" />
      </div>
      <div class="grid grid-cols-2 gap-4">
        <BaseInput :isRequired=false v-model="task.condition9" inputName="Have you had X-rays, MRI or other tests for this condition?" placeholder="" />
        <BaseInput :isRequired=false v-model="task.condition10" inputName="Mark an X on the picture where you continue to have pain, numbness, or tingling." placeholder="" />
			</div>
      <div class="grid grid-cols-3 gap-4">
        <BaseInput :isRequired=false v-model="task.condition11" inputName="Please list any health condition or disease that you currently have:" placeholder="" />
        <BaseInput :isRequired=false v-model="task.condition12" inputName="Are you ALLERGIC to any MEDICATIONS and FOOD?(Please list)" placeholder="" />
        <BaseInput :isRequired=false v-model="task.condition13" inputName="Are you positive for HIV/AIDS or Hepatitis virus?" placeholder="" />
			</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 inputTitle = ref(null)
const inputs = ref([])
const date = ref();
let task = reactive({
        condition1: '',
				condition2: '',
				condition3: '',
				condition4: '',
				condition5: '',
				condition6: '',
				condition7: '',
				condition8: '',
				condition9: '',
				condition10: '',
				condition11: '',
				condition12: '',
				condition13: '',
})

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 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
}

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