<template>
  <form @submit.prevent="onSubmit" class="bg-white dark:bg-dark-grey rounded-lg p-1" :validation-schema="schema">
    <div class="p-5 pr-3 flex flex-col gap-3 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.patientForm.edit ? 'Edit Patient' : 'Create New Patient' }}
        </h4>
      </div>
      <div class="grid grid-cols-4 gap-4">
        <BaseInput ref="inputLastName" v-model="patient.lastName" inputName="Last Name" placeholder="e.g. Hong" />
        <BaseInput ref="inputFirstName" v-model="patient.firstName" inputName="First Name" placeholder="e.g. Gil-dong " />
        <DOBBaseInput ref="inputDOB" v-model="patient.dob" inputName="DOB(Date of birth)" placeholder="e.g. 01271970" />
        
        <p class="text-medium-grey text-xs font-bold">Gender
          <!-- <BaseSexSelect @onClickOption="updateColumn" :value="columnName" /> -->
          <br>
          <div class="p-3 flex justify-between">
            <input type="radio" id="one" value="0" v-model="patient.sex" v-if="!systemStore.patientForm.edit" checked>
            <input type="radio" id="one" value="0" v-model="patient.sex" v-if="systemStore.patientForm.edit">
  
            <label for="one">Male</label>
            <input type="radio" id="two" value="1" v-model="patient.sex">
            <label for="two">FeMale</label>
            <input type="radio" id="three" value="2" v-model="patient.sex">
            <label for="two">etc</label>
          </div>
          <!-- <BaseRadioButtonGroup ref="sex" :options="decisions" v-model="sex" /> -->
        </p>
			</div>
      <hr>
      <div class="grid grid-cols-3 gap-4">
        <BaseInput :isRequired=false v-model="patient.cellPhone" inputName="Cell Phone" placeholder="562-222-2842" />
        <BaseInput :isRequired=false v-model="patient.homePhone" inputName="Home Phone" placeholder="562-222-2842" />
        <BaseInput :isRequired=false v-model="patient.email" inputName="Email" placeholder="medihandacu@gmail.com" />
			</div>
      <div class="grid grid-cols-4 gap-4">
        <BaseInput :isRequired=false v-model="patient.address" inputName="Address" placeholder="" />
        <BaseInput :isRequired=false v-model="patient.city" inputName="City" placeholder="" />
        <BaseInput :isRequired=false v-model="patient.state" inputName="State" placeholder="" />
        <BaseInput :isRequired=false v-model="patient.zipCode" inputName="Zip Code" placeholder="" />
			</div>
      <div class="grid grid-cols-3 gap-4">
        <BaseInput :isRequired=false v-model="patient.note" inputName="Note" placeholder="" />
        <BaseInput :isRequired=false v-model="patient.ssn" inputName="Social Security Number (REQUIRED IF YOU HAVE INSURANCE)" placeholder="" />
        <BaseInput :isRequired=false v-model="patient.referring" inputName="Whom may we thank for referring you?" placeholder="" />
			</div>
      <div class="flex flex-col gap-3">
        <p class="text-red dark:text-white text-xs font-bold">IN CASE OF EMERGENCY, CONTACT</p>
      </div>
      <div class="grid grid-cols-3 gap-4">
        <BaseInput :isRequired=false v-model="patient.eName" inputName="Name" placeholder="" />
        <BaseInput :isRequired=false v-model="patient.eRelationShip" inputName="Relationship" placeholder="" />
        <BaseInput :isRequired=false v-model="patient.ePhone" inputName="Phone" placeholder="562-222-2842" />
			</div>
      <hr>
      <div class="flex flex-col gap-3">
        <p class="text-main-purple dark:text-white text-xs font-bold">INSURANCE</p>
      </div>
      <div class="grid grid-cols-2 gap-4">
        <BaseInput :isRequired=false v-model="patient.insuFirst" inputName="Person responsible for this Account" placeholder="" />
        <BaseInput :isRequired=false v-model="patient.insuTwo" inputName="Insurance Co." placeholder="" />
			</div>
      <div class="grid grid-cols-3 gap-4">
        <BaseInput :isRequired=false v-model="patient.insuThree" inputName="Subscriber's Name" placeholder="" />
        <BaseInput :isRequired=false v-model="patient.insuFour" inputName="ID #" placeholder="" />
        <BaseInput :isRequired=false v-model="patient.insuFive" inputName="Group #" placeholder="" />
			</div>
      <div class="grid flex-col gap-3">
        <BaseInput :isRequired=false v-model="patient.insuSix" inputName="Subscriber's D.O.B" placeholder="" />
			</div>
      <ButtonPrimaryLarge type="submit">
        {{ systemStore.patientForm.edit ? 'Save Changes' : 'Create New Patient' }}
      </ButtonPrimaryLarge>
    </div>
  </form>
</template>
<script setup>
import { ref, reactive, onBeforeUpdate } from 'vue'
import { useSystemStore } from '@/store/system.js';
import { usePatientsStore } from '@/store/patients.js';
import BaseInput from '@/components/form/BaseInput.vue';
import DOBBaseInput from '@/components/form/DOBBaseInput.vue';
import ButtonPrimaryLarge from '@/components/buttons/PrimaryLarge.vue';
import { Form, Field, ErrorMessage } from "vee-validate";
import * as yup from "yup";

const systemStore = useSystemStore();
const patientsStore = usePatientsStore();

const schema = yup.object().shape({
      name: yup.string().required("Username is required!"),
      age: yup.string().required("Password is required!"),
    });

const inputLastName = ref(null)
const inputFirstName = ref(null)
const inputDOB = ref(null)


let patient = reactive({
        lastName: '',
				firstName: '',
				sex: '',
				address: '',
				city: '',
				state: '',
				zipCode: '',
				homePhone: '',
				cellPhone: '',
				email: '',
				dob: '',
				note: '',
				ssn: '',
				referring: '',
				eName: '',
				eRelationShip: '',
				ePhone: '',

				insuFirst: '',
				insuTwo: '',
				insuThree: '',
				insuFour: '',
				insuFive: '',
				insuSix: '',
})


const onSubmit = () => {
  if (validate()) {
    if (systemStore.patientForm.edit) {
      patientsStore.update(patient)

    } else {
      patientsStore.save(patient)
    }
    systemStore.hideOverlay()
  }
}
const validate = () => {
  let valid = true
  if (patient.lastName.trim().length === 0) {
    valid = false
    console.log(inputLastName);
    inputLastName.value.error = true
  }
  if (patient.firstName.trim().length === 0) {
    valid = false
    console.log(inputFirstName);
    inputFirstName.value.error = true
  }
  if (patient.dob.trim().length === 0) {
    console.log(inputDOB);
    valid = false
    inputDOB.value.error = true
  }
  // if (patient.cellPhone.trim().length === 0) {
  //   valid = false
  //   cellPhone.value.error = true
  // }
  // if (patient.eName.trim().length === 0) {
  //   valid = false
  //   eName.value.error = true
  // }
  // if (patient.eRelationShip.trim().length === 0) {
  //   valid = false
  //   eRelationShip.value.error = true
  // }
  // if (patient.ePhone.trim().length === 0) {
  //   valid = false
  //   ePhone.value.error = true
  // }



  // inputs.value.forEach((e, index) => {
  //   if (board?.columns[index]?.name.trim().length === 0) {
  //     valid = false
  //     e.error = true
  //   }
  // })
  return valid
}

//EDIT MODE
if (systemStore.patientForm.edit) {
  console.log(patientsStore.getCurrentPatient);
  patient = JSON.parse(JSON.stringify(patientsStore.getCurrentPatient));
  console.log(patient);
} else {
  // board.columns = [{ name: '', tasks: [] }, { name: '', tasks: [] }]
}
onBeforeUpdate(() => {
  // inputs.value = []
})
</script>