<script setup>
import { onBeforeMount, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore()
// const route = useRoute()
const router = useRouter()
const editDialog = ref(false)
const deleteDialog = ref(false)
const search = ref('')
const defaultItem = ref({
  id: -1,
  avatar: '',
  name: '',
  email: '',
  dob: '',
  phone_no: '',

})

const editedItem = ref(defaultItem.value)
const editedIndex = ref(-1)
const patientList = ref([])
const subcriptionLists = ref([])
const isLoading=ref(false)

const filter = ref({
    gender: '',
    state: '',
    plan: '',
})
// const gender =ref();
// const city =ref();
// const plan =ref();
// status options
const selectedOptions = [
  {
    text: 'Active',
    value: 1,
  },
  {
    text: 'InActive',
    value: 2,
  },
  
]

const refVForm = ref(null)

onBeforeMount(async () => {});
onMounted(async () => {
  store.dispatch('updateIsLoading', true)
  await store.dispatch('getSubcriptions')
  await store.dispatch('patientList')
  // console.log('patientList',store.getters.getPatientList)
  // patientList.value = store.getters.getPatientList
  store.dispatch('updateIsLoading', false)
 
});

const getPatientFilter = async() => {
 console.log("filter", filter.value.plan, filter.value.gender, filter.value.state);
  
  await store.dispatch('PatientFilter', {
    plan: filter.value.plan,
    gender: filter.value.gender,
    state: filter.value.state,
  })
  store.dispatch('updateIsLoading', false)
}

const getPatientList = computed(async () => {
  subcriptionLists.value = store.getters.getSubcriptions;
  console.log("subcriptin",subcriptionLists.value);
  patientList.value =  store.getters.getPatientList.map(history => ({
    ...history,
    dob: changeFormat(history.dob),
    }));
  return patientList.value  
    
});

onUnmounted(async () => {});
const formatPhoneNumber = () => {
  console.log(editedItem.value)
  // Remove non-numeric characters from the input
  const numericValue = editedItem.value.phone_no.replace(/\D/g, '');

  // Apply formatting logic
  if (numericValue.length <= 10) {
    editedItem.value.phone_no = numericValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
  } else {
    // Limit the input to a maximum of 14 characters
    const truncatedValue = numericValue.slice(0, 10);
    editedItem.value.phone_no = truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
  }
};
// headers
const headers = [
  // {
  //   title: 'ID',
  //   key: 'id',
  // },
  {
    title: 'NAME',
    key: 'name',
  },
  {
    title: 'EMAIL',
    key: 'email',
  },
  {
    key: 'dob',
    title: 'Date Of Birth'
    
  },
  {
    title: 'Phone',
    key: 'phone_no',
  },

  // {
  //   title: 'Lab Kit',
  //   key: 'labkit',
  // },
  
  
 
  // {
  //   title: 'ACTIONS',
  //   key: 'actions',
  // },
]

const resolveStatusVariant = status => {
  if (status === 1)
    return {
      color: 'primary',
      text: 'Current',
    }
  else if (status === 2)
    return {
      color: 'success',
      text: 'Professional',
    }
  else if (status === 3)
    return {
      color: 'error',
      text: 'Rejected',
    }
  else if (status === 4)
    return {
      color: 'warning',
      text: 'Resigned',
    }
  else
    return {
      color: 'info',
      text: 'Applied',
    }
}

const editItem = item => {
  editedIndex.value = patientList.value.indexOf(item)
  editedItem.value = { ...item }
  editDialog.value = true
}

const deleteItem = item => {
  console.log('del',item)
  editedIndex.value = patientList.value.indexOf(item)
  editedItem.value = { ...item }
  deleteDialog.value = true
}

const close = () => {
  editDialog.value = false
  editedIndex.value = -1
  editedItem.value = { ...defaultItem.value }
}

const closeDelete = () => {
  deleteDialog.value = false
  editedIndex.value = -1
  editedItem.value = { ...defaultItem.value }
}

const getMettings = (Item) => {
  router.push('/admin/patient/meetings/'+Item.id);
}

const save = async () => {
  const { valid } = await refVForm.value.validate()
  console.log(valid)
  if (valid) {
    console.log('editedItem.value',editedItem.value);
    if (editedIndex.value > -1)
    {
      await store.dispatch('patientUpdate',{
        id: editedItem.value.id,
        first_name: editedItem.value.first_name,
        last_name: editedItem.value.last_name,
        email: editedItem.value.email,
        phone_no: editedItem.value.phone_no,
        dob: editedItem.value.dob,
      })
      Object.assign(patientList.value[editedIndex.value], editedItem.value)
    }else{
      patientList.value.push(editedItem.value)
    }
  close()
  }
 
  
}

const states = ref([
    { name: 'Alabama', abbreviation: 'AL' },
    { name: 'Alaska', abbreviation: 'AK' },
    { name: 'Arizona', abbreviation: 'AZ' },
    { name: 'Arkansas', abbreviation: 'AR' },
    { name: 'Howland Island', abbreviation: 'UM-84' },
    { name: 'Delaware', abbreviation: 'DE' },
    { name: 'Maryland', abbreviation: 'MD' },
    { name: 'Baker Island', abbreviation: 'UM-81' },
    { name: 'Kingman Reef', abbreviation: 'UM-89' },
    { name: 'New Hampshire', abbreviation: 'NH' },
    { name: 'Wake Island', abbreviation: 'UM-79' },
    { name: 'Kansas', abbreviation: 'KS' },
    { name: 'Texas', abbreviation: 'TX' },
    { name: 'Nebraska', abbreviation: 'NE' },
    { name: 'Vermont', abbreviation: 'VT' },
    { name: 'Jarvis Island', abbreviation: 'UM-86' },
    { name: 'Hawaii', abbreviation: 'HI' },
    { name: 'Guam', abbreviation: 'GU' },
    { name: 'United States Virgin Islands', abbreviation: 'VI' },
    { name: 'Utah', abbreviation: 'UT' },
    { name: 'Oregon', abbreviation: 'OR' },
    { name: 'California', abbreviation: 'CA' },
    { name: 'New Jersey', abbreviation: 'NJ' },
    { name: 'North Dakota', abbreviation: 'ND' },
    { name: 'Kentucky', abbreviation: 'KY' },
    { name: 'Minnesota', abbreviation: 'MN' },
    { name: 'Oklahoma', abbreviation: 'OK' },
    { name: 'Pennsylvania', abbreviation: 'PA' },
    { name: 'New Mexico', abbreviation: 'NM' },
    { name: 'American Samoa', abbreviation: 'AS' },
    { name: 'Illinois', abbreviation: 'IL' },
    { name: 'Michigan', abbreviation: 'MI' },
    { name: 'Virginia', abbreviation: 'VA' },
    { name: 'Johnston Atoll', abbreviation: 'UM-67' },
    { name: 'West Virginia', abbreviation: 'WV' },
    { name: 'Mississippi', abbreviation: 'MS' },
    { name: 'Northern Mariana Islands', abbreviation: 'MP' },
    { name: 'United States Minor Outlying Islands', abbreviation: 'UM' },
    { name: 'Massachusetts', abbreviation: 'MA' },
    { name: 'Connecticut', abbreviation: 'CT' },
    { name: 'Florida', abbreviation: 'FL' },
    { name: 'District of Columbia', abbreviation: 'DC' },
    { name: 'Midway Atoll', abbreviation: 'UM-71' },
    { name: 'Navassa Island', abbreviation: 'UM-76' },
    { name: 'Indiana', abbreviation: 'IN' },
    { name: 'Wisconsin', abbreviation: 'WI' },
    { name: 'Wyoming', abbreviation: 'WY' },
    { name: 'South Carolina', abbreviation: 'SC' },
    { name: 'Arkansas', abbreviation: 'AR' },
    { name: 'South Dakota', abbreviation: 'SD' },
    { name: 'Montana', abbreviation: 'MT' },
    { name: 'North Carolina', abbreviation: 'NC' },
    { name: 'Palmyra Atoll', abbreviation: 'UM-95' },
    { name: 'Puerto Rico', abbreviation: 'PR' },
    { name: 'Colorado', abbreviation: 'CO' },
    { name: 'Missouri', abbreviation: 'MO' },
    { name: 'New York', abbreviation: 'NY' },
    { name: 'Maine', abbreviation: 'ME' },
    { name: 'Tennessee', abbreviation: 'TN' },
    { name: 'Georgia', abbreviation: 'GA' },
    { name: 'Louisiana', abbreviation: 'LA' },
    { name: 'Nevada', abbreviation: 'NV' },
    { name: 'Iowa', abbreviation: 'IA' },
    { name: 'Idaho', abbreviation: 'ID' },
    { name: 'Rhode Island', abbreviation: 'RI' },
    { name: 'Washington', abbreviation: 'WA' },
    { name: 'Ohio', abbreviation: 'OH' },
    // ... (add the rest of the states)
]);

const sortedStates = computed(() => {
    return states.value.slice().sort((a, b) => {
        return a.name.localeCompare(b.name);
    });
});

const deleteItemConfirm = async () => {
  console.log('editedIndex.value',editedIndex.value,editedItem.value.id)
  await store.dispatch('patientDelete',{
    id: editedItem.value.id
  })
  patientList.value.splice(editedIndex.value, 1)
  closeDelete()
}


function changeFormat(dateFormat) {
    const dateParts = dateFormat.split('-'); // Assuming date is in yyyy-mm-dd format
    const year = parseInt(dateParts[0]);
    const month = parseInt(dateParts[1]); // No need for padding
    const day = parseInt(dateParts[2]); // No need for padding

    // Create a new Date object with the parsed values
    const date = new Date(year, month - 1, day); // Month is zero-based in JavaScript Date object

    // Format the date as mm-dd-yyyy
    const formattedDate = month + '-' + day + '-' + date.getFullYear();
    // console.log("formattedDate",formattedDate)
    return formattedDate;
}
const LabKit = (item)=> {
    router.push('/admin/patients/labkit/'+item.id);
}

const onSubcriptionChange = async(newvalue)=> {
  filter.value.plan = newvalue;
  console.log("Plan",filter.value.plan );
  await getPatientFilter();

}
const onGenderChange = async(newvalue)=> {
  filter.value.gender = newvalue;
  console.log("gender",filter.value.gender);
  await getPatientFilter();

}
const onStateChange = async(newvalue)=> {
  filter.value.state = newvalue;
  console.log("state",filter.value.state);
  await getPatientFilter();

}


</script>

<template>
  <v-row>
    <v-col cols="12" md="12" v-if="getPatientList">
      <v-card title="Patients">
      <VCardText >
          <VRow>
             <VCol
              cols="12"
              
              md="4"
            >
            <VSelect
                 v-model="filter.plan"
                 label="Subcription"
                  placeholder="Subcription"
                  density="comfortable"
                  :items="subcriptionLists"
                  item-title="title"
                  item-value="slug"
                  @update:model-value="onSubcriptionChange"
          />
          
          
          </VCol>
            <VCol
              cols="12"
              
              md="4"
            >
            
          <VSelect
                  v-model="filter.gender"
                  label="Gender"
                  placeholder="Gender"
                  density="comfortable"
                  :items="['Male', 'Female']"
                  @update:model-value="onGenderChange"
                  
          />
          
          </VCol>
          <VCol
              cols="12"
              
              md="4"
            >
            <VSelect
                  v-model="filter.state"
                  label="State"
                  density="comfortable"
                  :items="sortedStates"
                  item-title="name"
                  item-value="abbreviation"
                  @update:model-value="onStateChange"
                  
          />
          
           </VCol>
            <!-- <VCol
              cols="12"
              
              md="4"
            >
              <VTextField
                v-model="search"
                label="Search"
                placeholder="Search ..."
                append-inner-icon="ri-search-line"
                single-line
                hide-details
                dense
                outlined
              />
            </VCol> -->
          </VRow>
        </VCardText>
      <VDataTable
        :headers="headers"
        :items="patientList"
        :search="search"
        :items-per-page="5"
        class="text-no-wrap"
      >
      <template #item.id="{ item }">
    {{ item.id }}
  </template>
        <!-- full name -->
        <template #item.name="{ item }">
          <div class="d-flex align-center">
            <!-- avatar -->
            <VAvatar
              size="32"
              :color="item.avatar ? '' : 'primary'"
              :class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
              :variant="!item.avatar ? 'tonal' : undefined"
            >
              <VImg
                v-if="item.avatar"
                :src="item.avatar"
              />
              <span
                v-else
                class="text-sm"
              >{{ avatarText(item.name) }}</span>
            </VAvatar>
            
            <div class="d-flex flex-column ms-3">
                <router-link
                  :to="{ name: 'admin-patient-profile', params: { id: item.id } }"
                  class="highlighted"
                >
              <span class="d-block font-weight-medium  text-truncate">{{ item.name }}</span>
               </router-link>
              <small>{{ item.post }}</small>
            </div>
          </div>
        </template>

        

        <!-- status -->
        <template #item.status="{ item }">
          <VChip
            :color="resolveStatusVariant(item.status).color"
            density="comfortable"
          >
            {{ resolveStatusVariant(item.status).text }}
          </VChip>
        </template>
        <template #item.labkit="{ item }">
          <div class="text-primary cursor-pointer" @click="LabKit(item)"> LabKits</div>
        </template>

        <!-- Actions -->
        <template #item.actions="{ item }">
          <div class="d-flex gap-1">
            <IconBtn
              size="small"
              @click="editItem(item)"
            >
              <VIcon icon="ri-pencil-line" />
            </IconBtn>
            <IconBtn
              size="small"
              @click="deleteItem(item)"
            >
              <VIcon icon="ri-delete-bin-line" />
            </IconBtn>
            <IconBtn
                size="small"
                @click="getMettings(item)"
              >
              <VIcon icon="ri-time-line" />
            </IconBtn>
          </div>
        </template>
      </VDataTable>
      </v-card>
    </v-col>
  </v-row>
  <!-- 👉 Edit Dialog  -->
  <VDialog
    v-model="editDialog"
    max-width="600px"
  >
  <VForm ref="refVForm" >
    <VCard>
      <VCardTitle>
        <span class="headline">Edit Patient</span>
      </VCardTitle>

      <VCardText>
        <VContainer >
         
          <VRow>
            <!-- fullName -->
            <VCol cols="12" md="6">
              <VTextField
                v-model="editedItem.first_name"
                label="First Name"
                :rules="[requiredFirstName]"
              />
            </VCol>
            <VCol cols="12" md="6">
              <VTextField
                v-model="editedItem.last_name"
                label="Last Name"
                :rules="[requiredLastName]"
              />
            </VCol>

            <!-- email -->
            <VCol cols="12" sm="6" md="12">
              <VTextField
                v-model="editedItem.email"
                label="Email"
                :rules="[requiredEmail, emailValidator]"
              />
            </VCol>

         
            <VCol cols="12" sm="6" md="12">
              <VTextField
                v-model="editedItem.dob" type="date" 
                label="Date Of Birth"
              />
            </VCol>
            <VCol cols="12" sm="6" md="12">
              <VTextField v-model="editedItem.phone_no" label="Phone Number" pattern="^\(\d{3}\) \d{3}-\d{4}$"
                :rules="[requiredPhone, validUSAPhone]" placeholder="i.e. (000) 000-0000"
                @input="formatPhoneNumber" max="14" density="comfortable" />
            </VCol>
            

         

            <!-- status -->
            <VCol
              cols="12"

              md="12"
            >
              <VSelect
                v-model="editedItem.status"
                :items="selectedOptions"
                item-title="text"
                item-value="value"
                label="Status"
                variant="outlined"
              />
            </VCol>
          </VRow>
        </VContainer>
      </VCardText>

      <VCardActions>
        <VSpacer />

        <VBtn
          color="error"
          variant="outlined"
          @click="close"
        >
          Cancel
        </VBtn>

        <VBtn
          color="success"
          variant="elevated"
          @click="save"
        >
          Save
        </VBtn>
        
      </VCardActions>
    </VCard>
    </VForm>
  </VDialog>

  <!-- 👉 Delete Dialog  -->
  <VDialog
    v-model="deleteDialog"
    max-width="500px"
  >
    <VCard>
      <VCardTitle>
        Are you sure you want to delete this item?
      </VCardTitle>

      <VCardActions>
        <VSpacer />

        <VBtn
          color="error"
          variant="outlined"
          @click="closeDelete"
        >
          Cancel
        </VBtn>

        <VBtn
          color="success"
          variant="elevated"
          @click="deleteItemConfirm"
        >
          OK
        </VBtn>

        <VSpacer />
      </VCardActions>
    </VCard>
  </VDialog>
</template>
<style scoped>
.highlighted {
  /* Add your desired highlighting styles here */
  font-weight: bold;
  color: #a169ff; /* or any other color you prefer */
}
</style>
