<script setup>
import axios from '@axios';
import avatar1 from "@images/avatars/avatar-1.png";
import {
    emailValidator,
    requiredEmail,
    requiredLastName,
    requiredName,
    requiredPhone,
    requiredValidator,
    validUSAPhone
} from '@validators';
import { onMounted } from 'vue';
import { useStore } from "vuex";
const getIsTonalSnackbarVisible = ref(false);

const store = useStore();
const errors = ref({
    name: undefined,
    last_name: undefined,
    phone: undefined,
    email: undefined,
    dob: undefined,
    gender: undefined,
    marital_status: undefined,
    height: undefined,
    weight: undefined,

})
const refInputEl = ref();
const isTonalSnackbarVisible = ref(false)
const patientResponse = ref(false)
const isLoadingVisible = ref(false)
const infoVForm = ref()
const name = ref()
const last_name = ref()
const email = ref(null)
const phone = ref(null)
const dob = ref()
const gender = ref()
const martialStatus = ref(null)
const height = ref(null)
const weight = ref(null)
const patientId = ref()
const ImageBase64 = ref();
const accountData = {
    avatarImg: avatar1,
};
const accountDataLocal = ref(structuredClone(accountData));
const changeAvatar = async (file) => {
    const fileReader = new FileReader();
    const { files } = file.target;
    if (files && files.length) {
        fileReader.readAsDataURL(files[0]);
        fileReader.onload = () => {
            if (typeof fileReader.result === "string") {
                accountDataLocal.value.avatarImg = fileReader.result;
            }
            ImageBase64.value = fileReader.result.split(",")[1];
            store.dispatch("profilePicPatient", {
                image: ImageBase64.value, //ecelData,
            });
        };
    }
};
const genders = ref([
    { name: 'Male', abbreviation: 'Male' },
    { name: 'Female', abbreviation: 'Female' },
    { name: 'Other', abbreviation: 'Other' },
]);

const maritalStatuses = ref([
    { name: 'Single', abbreviation: 'Single' },
    { name: 'Married', abbreviation: 'Married' },
    { name: 'Divorced', abbreviation: 'Divorced' },
]);

const heights = ref([
    { name: '5 ft 0 in', abbreviation: '5 ft 0 in' },
    { name: '5 ft 1 in', abbreviation: '5 ft 1 in' },
    { name: '5 ft 2 in', abbreviation: '5 ft 2 in' },
    { name: '5 ft 3 in', abbreviation: '5 ft 3 in' },
    { name: '5 ft 4 in', abbreviation: '5 ft 4 in' },
    { name: '5 ft 5 in', abbreviation: '5 ft 5 in' },
    { name: '5 ft 6 in', abbreviation: '5 ft 6 in' },
    { name: '5 ft 7 in', abbreviation: '5 ft 7 in' },
    { name: '5 ft 8 in', abbreviation: '5 ft 8 in' },
    { name: '5 ft 9 in', abbreviation: '5 ft 9 in' },
    { name: '5 ft 10 in', abbreviation: '5 ft 10 in' },
    { name: '5 ft 11 in', abbreviation: '5 ft 11 in' },
    { name: '6 ft 0 in', abbreviation: '6 ft 0 in' },
    { name: '6 ft 1 in', abbreviation: '6 ft 1 in' },
    { name: '6 ft 2 in', abbreviation: '6 ft 2 in' },
    { name: '6 ft 3 in', abbreviation: '6 ft 3 in' },
    { name: '6 ft 4 in', abbreviation: '6 ft 4 in' },
    { name: '6 ft 5 in', abbreviation: '6 ft 5 in' },
    { name: '6 ft 6 in', abbreviation: '6 ft 6 in' },
    { name: '6 ft 7 in', abbreviation: '6 ft 7 in' },
    { name: '6 ft 8 in', abbreviation: '6 ft 8 in' },
    { name: '6 ft 9 in', abbreviation: '6 ft 9 in' },
    { name: '6 ft 10 in', abbreviation: '6 ft 10 in' },
    { name: '6 ft 11 in', abbreviation: '6 ft 11 in' },
    { name: '7 ft 0 in', abbreviation: '7 ft 0 in' },
]);

onMounted(async () => {
    await getPatientInfo()
    await store.dispatch("patientDetial");
    let list = await store.getters.getPatientDetail;
    if (!list.profile_picture) {
        accountDataLocal.value.avatarImg = avatar1;
    } else {
        accountDataLocal.value.avatarImg = list.profile_picture;
    }
})

const getPatientInfo = async () => {
    const patient_id = localStorage.getItem('patient_id')
    const access_token = localStorage.getItem('access_token');
    isLoadingVisible.value = true;
    await axios.post('/api/agent-last-appointment-detail/' + patient_id, {
        headers: {
            'Authorization': `Bearer ${access_token}`,
        }
    })
        .then(response => {
            console.log('Response:', response.data);
            if (response.data) {
                let patientData = response.data.patient

                name.value = patientData.first_name;
                last_name.value = patientData.last_name
                email.value = patientData.email
                phone.value = patientData.phone_no
                dob.value = patientData.dob;
                gender.value = patientData.gender;
                martialStatus.value = patientData.marital_status;
                height.value = patientData.height;
                weight.value = patientData.weight;
                isLoadingVisible.value = false;
            } else {
                isLoadingVisible.value = false;
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
}

const formatPhoneNumber = () => {
    // Remove non-numeric characters from the input
    const numericValue = phone.value.replace(/\D/g, '');

    // Apply formatting logic
    if (numericValue.length <= 10) {
        phone.value = 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);
        phone.value = truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
    }
};
const getCurrentDate = () => {
    const today = new Date();
    const year = today.getFullYear();
    let month = today.getMonth() + 1;
    let day = today.getDate();

    // Format the date to match the input type="date" format
    month = month < 10 ? `0${month}` : month;
    day = day < 10 ? `0${day}` : day;

    return `${year}-${month}-${day}`;
};
const onSubmit = async () => {
    infoVForm.value?.validate().then(async ({ valid: isValid }) => {
        console.log('isValid ', isValid)
        if (isValid)
            await saveInfo()
    })
}

const saveInfo = async () => {
    isLoadingVisible.value = true;
    await axios.post('/api/update-patient-detail', {
        first_name: name.value,
        last_name: last_name.value,
        phone_no: phone.value,
        email: email.value,
        dob: dob.value,
        gender: gender.value,
        marital_status: martialStatus.value,
        height: height.value,
        weight: weight.value,
    }).then(r => {
        console.log("Info Save", r.data);
        isTonalSnackbarVisible.value = true;
        patientResponse.value = r.data.message;
        isLoadingVisible.value = false;
    }).catch(e => {
        console.log(e.response);
        const { errors: formErrors } = e.response.data.errors;
        errors.value = e.response.data.errors;
        isLoadingVisible.value = false;
        console.error("Error", e.response.data.errors)
    });
}

</script>

<template>
    <VSnackbar v-model="isTonalSnackbarVisible" :timeout="5000" location="top end" variant="flat" color="success">
        {{ patientResponse }}
    </VSnackbar>

    <VDialog v-model="isLoadingVisible" width="110" height="150" color="primary">
        <VCardText class="" style="color: white !important;">
            <div class="demo-space-x">
                <VProgressCircular :size="40" color="primary" indeterminate />
            </div>
        </VCardText>
    </VDialog>
    <VRow>
        <VCol cols="12">
            <VCard>
                <VCardText>
                    <!-- 👉 Form -->
                    <div class="d-flex mb-10">
                        <VSnackbar v-model="getIsTonalSnackbarVisible" :timeout="5000" location="top end" variant="flat"
                            color="success">
                            <VIcon class="ri-success-line success-icon" />
                            Profile Update Successfully
                        </VSnackbar>
                        <!-- 👉 Avatar -->
                        <VAvatar rounded size="100" class="me-6" :image="accountDataLocal.avatarImg" />

                        <!-- 👉 Upload Photo -->
                        <form class="d-flex flex-column justify-center gap-4">
                            <div class="d-flex flex-wrap gap-4">
                                <VBtn color="primary" @click="refInputEl?.click()">
                                    <VIcon icon="ri-upload-cloud-line" class="d-sm-none" />
                                    <span class="d-none d-sm-block">Upload Profile Image</span>
                                </VBtn>
                                <input ref="refInputEl" type="file" name="file" accept=".jpeg,.png,.jpg,GIF" hidden
                                    @input="changeAvatar" />
                            </div>
                            <p class="text-body-1 mb-0">
                                Allowed JPG, GIF or PNG. Max size of 800K
                            </p>
                        </form>
                    </div>
                    <VForm class="mt-6" ref="infoVForm" @submit.prevent="onSubmit">
                        <VRow>
                            <!-- 👉 First Name -->
                            <VCol md="4" cols="12">
                                <VTextField v-model="name" placeholder="John" label="First Name" :rules="[requiredName]"
                                    :error-messages="errors.name" />
                            </VCol>

                            <!-- 👉 Last Name -->
                            <VCol md="4" cols="12">
                                <VTextField v-model="last_name" placeholder="Doe" label="Last Name"
                                    :rules="[requiredLastName]" :error-messages="errors.last_name" />
                            </VCol>

                            <!-- 👉 Email -->
                            <VCol cols="12" md="4">
                                <VTextField v-model="email" label="E-mail" placeholder="johndoe@gmail.com" type="email"
                                    :rules="[requiredEmail, emailValidator]" :error-messages="errors.email"
                                    disabled="" />
                            </VCol>

                            <!-- 👉 Phone -->
                            <VCol cols="12" md="4">
                                <VTextField v-model="phone" label="Phone Number" pattern="^\(\d{3}\) \d{3}-\d{4}$"
                                    :rules="[requiredPhone, validUSAPhone]" :error-messages="errors.phone"
                                    placeholder="(917) 543-9876" @input="formatPhoneNumber" max="14" />
                            </VCol>

                            <VCol md="4" cols="12">
                                <VTextField v-model="dob" :max="getCurrentDate()" label="Date of Birth"
                                    placeholder="Date of Birth" type="date" :rules="[requiredValidator]" />
                            </VCol>
                            <VCol md="4" cols="12">
                                <v-select v-model="gender" label="Select Gender" :items="genders" item-title="name"
                                    item-value="abbreviation" :rules="[requiredValidator]"
                                    :error-messages="errors.gender">
                                </v-select>
                            </VCol>
                            <VCol cols="12" md="4">
                                <v-select v-model="martialStatus" label="Select Marital Status" :items="maritalStatuses"
                                    item-title="name" item-value="abbreviation" :rules="[requiredValidator]"
                                    :error-messages="errors.martial_status">
                                </v-select>
                            </VCol>
                            <VCol cols="12" md="4">
                                <v-select v-model="height" label="Select Height" :items="heights" item-title="name"
                                    item-value="abbreviation" :rules="[requiredValidator]"
                                    :error-messages="errors.height">
                                </v-select>
                            </VCol>
                            <VCol cols="12" md="4">
                                <VTextField v-model="weight" label="Weight" :rules="[requiredValidator]"
                                    :error-messages="errors.weight" />
                            </VCol>

                            <!-- 👉 Form Actions -->
                            <VCol cols="12" class="d-flex flex-wrap gap-4">
                                <VBtn type="submit">Save changes</VBtn>

                                <!-- <VBtn color="secondary" variant="tonal" type="reset">
                  Reset
                </VBtn> -->
                            </VCol>
                        </VRow>
                    </VForm>
                </VCardText>
            </VCard>
        </VCol>
    </VRow>
</template>
