<script setup>
import avatar1 from "@images/avatars/avatar-1.png";
import moment from 'moment-timezone';
import { computed, onMounted, ref } from "vue";
import { useStore } from "vuex";
const route = useRoute();
const isConfirmDialogVisible = ref(false);
const isUserInfoEditDialogVisible = ref(false);
const isEditAddressDialogVisible = ref(false);
const markAsCompleted = ref(false);
// const scheduleDate = ref('');
// const scheduleTime = ref('');
const headers = [
    {
        title: "Product",
        key: "title",
    },
    {
        title: "Price",
        key: "price",
    },
    {
        title: "Quantity",
        key: "quantity",
    },
    {
        title: "status",
        key: "status",
    },
    {
        title: "Total",
        key: "total",
        sortable: false,
    },
];
const store = useStore();
const orderData = ref(null);
const pateintDetail = ref({});
const productItems = ref([]);
const appointmentData = ref([]);
const orderId = ref();
const orderDetail = ref();
const scheduleTimeDate = ref('');
const scheduleTime = ref();
const telemed_pro = ref();
const subTotalAmount = ref();
const status = ref('false');
const filteredOrders = computed(() => {
    let filtered = store.getters.getSinglePatientAppointment;
    // scheduleTimeDate.value =  getConvertedDate(convertUtcTime(filtered.appointment_time,
    // filtered.appointment_date, filtered.timezone));

    console.log("filtered>>>>>>>>>>>>",filtered);
    status.value = true; 
    
    if(filtered && filtered.status == 'pending'){
        status.value = true;
    }

    return filtered;
});

const convertUtcTime = (time, date, timezone) => {
    const timezones = {
        "EST": "America/New_York",
        "CST": "America/Chicago",
        "MST": "America/Denver",
        "PST": "America/Los_Angeles",
        // Add more mappings as needed
    };

    // Get the IANA timezone identifier from the abbreviation
    const ianaTimeZone = timezones[timezone];

    if (!ianaTimeZone) {
        throw new Error(`Unknown timezone abbreviation: ${timezone}`);
    }

    // Combine date and time into a single string
    const dateTimeString = `${date}T${time}Z`;  // Assuming the input date and time are in UTC

    // Create a Date object from the combined string
    const dateObj = new Date(dateTimeString);

    // Options for the formatter
    const options = {
        timeZone: ianaTimeZone,
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false,
    };

    // Create the formatter
    const formatter = new Intl.DateTimeFormat('en-US', options);

    // Format the date
    const convertedDateTime = formatter.format(dateObj);

    return convertedDateTime;
};
const getConvertedTime = (inputDate) => {
    // Split the input date string into date and time components
    const [datePart, timePart] = inputDate.split(', ');

    // Split the time component into hours, minutes, and seconds
    let [hours, minutes, seconds] = timePart.split(':');

    // Convert the hours to an integer
    hours = parseInt(hours);

    // Determine the period (AM/PM) and adjust the hours if necessary
    const period = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12 || 12; // Convert 0 and 12 to 12, and other hours to 1-11

    // Format the time as desired
    const formattedTime = `${hours.toString().padStart(2, '0')}:${minutes}${period}`;

    return formattedTime;
}
const getConvertedDate = (inputDate) => {
    // Split the input date string into date and time components
    const [datePart, timePart] = inputDate.split(', ');

    // Split the date component into month, day, and year
    const [month, day, year] = datePart.split('/');

    // Create a new Date object from the parsed components
    const dateObject = new Date(`${year}-${month}-${day}T${timePart}`);

    // Define an array of month names
    const monthNames = [
        "January", "February", "March", "April", "May", "June",
        "July", "August", "September", "October", "November", "December"
    ];

    // Format the date as desired
    const formattedDate = `${monthNames[dateObject.getMonth()]} ${day}, ${year}`;

    return formattedDate;
};
const formatDateActviy1 = (date) => {
    const messageDate = new Date(date);
    const dayFormatter = new Intl.DateTimeFormat('en-US', { weekday: 'long' });
    const timeFormatter = new Intl.DateTimeFormat('en-US', {
        hour: 'numeric',
        minute: '2-digit',
        hour12: true
    });
    return `${dayFormatter.format(messageDate)} ${timeFormatter.format(messageDate)}`;
};
const formatDateActviy = (date) => {
    const messageDate = new Date(date);
    const options = {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    };
    return messageDate.toLocaleDateString('en-US', options).replace(/\//g, '-');
};
const formatDate = (date) => {
    const messageDate = new Date(date);
    const options = {
        year: "numeric",
        month: "numeric",
        day: "numeric",
        hour: "numeric",
        minute: "2-digit",

        hour12: false,
    };
    const formattedDate = messageDate
        .toLocaleString("en-US", options)
        .replace(/\//g, "-");
    return `${formattedDate}`;
};
const convertUtcDateTimeToLocal = (utcDate, utcTime, type) => {
    const utcDateTime = `${utcDate}T${utcTime}Z`;  // Use Z to denote UTC timezone explicitly
    const momentObj = moment.utc(utcDateTime).local();  // Convert UTC to local time

    if (type === 'date') {
        return momentObj.format('YYYY-MM-DD');  // Return local date
    } else if (type === 'time') {
        return momentObj.format('HH:mm:ss');  // Return local time
    } else {
        throw new Error("Invalid type specified. Use 'date' or 'time'.");
    }
};
function changeDateFormat(dateFormat) {
    console.log("startTimeFormat", dateFormat);
    if (dateFormat) {
        const [datePart, timePart] = dateFormat.split(" "); // Split date and time parts
        const [year, month, day] = datePart.split("-"); // Split date into year, month, and day
        const formattedMonth = parseInt(month).toString(); // Convert month to integer and then string to remove leading zeros
        const formattedDay = parseInt(day).toString(); // Convert day to integer and then string to remove leading zeros
        const formattedDate = `${formattedMonth}-${formattedDay}-${year}`; // Format date as mm-dd-yyyy
        return `${formattedDate} ${timePart}`; // Combine formatted date with original time part
    }
}


function totalCallDuration(start_time, end_time) {
    console.log(start_time, end_time);
    const startMoment = moment(start_time);
    const endMoment = moment(end_time);

    // Calculate the duration
    const duration = moment.duration(endMoment.diff(startMoment));
    const hours = duration.hours();
    const thours = `${String(hours).padStart(2, "0")}`;
    const minutes = duration.minutes();
    const tminutes = `${String(minutes).padStart(2, "0")}`;
    const seconds = duration.seconds();
    const tsecond = `${String(seconds).padStart(2, "0")}`;
    let durationText;
    if (hours === 0 && minutes === 0) {
        //for second
        durationText = ` 00:00:${tsecond}`;
    } else if (hours === 0 && minutes > 0) {
        //for minutes
        durationText = `00:${tminutes}:${tsecond}`;
    } else if (hours > 0) {
        //for hours
        durationText = `${thours}:${tminutes}:${tsecond}`;
    }
    const totalDuration = durationText;
    console.log("Duration:", durationText);
    // You may need to adjust this function based on your actual data structure
    // For example, if you have separate first name and last name properties in each appointment object
    return totalDuration; // For now, just return the first name
}
onMounted(async () => {
    store.dispatch("updateIsLoading", true);
    // await store.dispatch("orderDetailPatient", {
    //     id: route.params.id,
    // });
    // orderData.value = store.getters.getPatientOrderDetail;
    // console.log(orderData.value);

    await store.dispatch('getAppointmentByIdAgent', {
        patient_id: localStorage.getItem('patient_id'),
        appointment_id: localStorage.getItem('patient_appiontment_id'),
    })

    orderData.value = store.getters.getSinglePatientAppointment;
    orderDetail.value = store.getters.getSinglePatientAppointment.order;
    console.log("appointmentData-------------------------", orderData.value);
    orderId.value = orderData.value.order.id;
    status.value = true;
    if (orderData.value && orderData.value.status == 'pending') {
        status.value = false;
    }
    markAsCompleted.value = true;
    // let appointmentDate = convertUtcDateTimeToLocal(orderData.value.appointment_date, orderData.value.appointment_time, 'date')
    // let appointmentTime = convertUtcDateTimeToLocal(orderData.value.appointment_date, orderData.value.appointment_time, 'time')
    // scheduleDate.value = moment(appointmentDate, "YYYY-MM-DD").format("MMMM DD, YYYY")
    // scheduleTime.value = moment(appointmentTime, "HH:mm:ss").format("hh:mm A");

});
const getStatusColor = (status) => {
    switch (status) {
        case "pending":
            return "orange";
        case "Shipped":
            return "blue";
        case "Delivered":
            return "green";
        case "Cancelled":
            return "red";
        default:
            return "gray";
    }
};
const handleActionClick = async (item) => {
    await store.dispatch('agentMeetingSatausUpdate', { id: item.id });
    await store.dispatch('getAppointmentByIdAgent', {
        patient_id: localStorage.getItem('patient_id'),
        appointment_id: localStorage.getItem('patient_appiontment_id'),
    });


};

</script>
<template>
    <VDialog v-model="store.getters.getIsLoading" 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>
    <VSnackbar v-if="markAsCompleted" :timeout="5000" location="top end" variant="flat" color="success">
        Mark as Completed
    </VSnackbar>
    <div>
        <VRow>
            <VCol cols="6">
                <h5 class="text-h5">Order #{{ orderId }}</h5>
            </VCol>
            <VCol cols="6" class="text-end">
                <VBtn :disabled="status" @click="handleActionClick(filteredOrders)"> Mark as Completed</VBtn>
                <!-- <VBtn  :disabled="filteredOrders.status.toLowerCase() == 'completed'"
                            color="primary" @click="handleActionClick(filteredOrders)">
                            <VIcon v-if="filteredOrders.status.toLowerCase() !== 'completed'"
                                color="error" icon="mdi-arrow-right" size="small"  />
                            Mark as Completed
                        </VBtn> -->
            </VCol>
        </VRow>

        <VRow v-if="filteredOrders">
            <VCol cols="12" md="8">
                <!-- 👉 Order Details -->
                <VCard class="mb-6">
                    <VCardItem>
                        <template #title>
                            <h5>Order Details</h5>

                        </template>
                    </VCardItem>
                    <div class="table-container">
                        <VDataTable :headers="headers" :items="filteredOrders.order_items" item-value="id"
                            class="text-no-wrap ">
                            <template #item.title="{ item }">
                                <div class="d-flex gap-x-3">
                                    <!-- <VAvatar size="34" variant="tonal" :image="item.image_url" rounded /> -->

                                    <div class="d-flex flex-column align-center">
                                        <h5 style="margin-bottom: 0px;">
                                            {{ item.plans_v1.title }}
                                        </h5>

                                        <span class="text-sm text-start align-self-start">
                                            {{ item.plans_v1.list_two_title }}
                                        </span>
                                    </div>
                                </div>
                            </template>

                            <template #item.price="{ item }">
                                <span>${{ item.plans_v1.price }}</span>
                            </template>
                            <template #item.status="{ item }">
                                <span>
                                    <VChip variant="tonal" :color="getStatusColor(item.status)" size="small">
                                        {{ item.status }}
                                    </VChip>
                                </span>
                            </template>
                            <template #item.total="{ item }">
                                <span> ${{ item.plans_v1.price * item.plans_v1.qty }} </span>
                            </template>

                            <template #bottom />
                        </VDataTable>
                    </div>
                    <VDivider />
                    <VCardText>
                        <div class="d-flex align-end flex-column">
                            <table class="text-high-emphasis">
                                <tbody>
                                    <tr>
                                        <td width="200px">Subtotal:</td>
                                        <td class="font-weight-medium">
                                            ${{
        parseFloat(
            filteredOrders.order
                .order_total_amount
        ).toFixed(2)
    }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Shipping fee:</td>
                                        <td class="font-weight-medium">
                                            ${{ parseFloat(filteredOrders.order.order_total_shipping).toFixed(2)
                                            }}
                                        </td>
                                    </tr>

                                    <tr>
                                        <td class="font-weight-medium">
                                            Total:
                                        </td>
                                        <td class="font-weight-medium">
                                            ${{
        parseFloat(
            filteredOrders.order
                .order_total_amount + filteredOrders.order.order_total_shipping
        ).toFixed(2)
    }}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </VCardText>
                </VCard>

                <!-- 👉 Shipping Activity -->
                <VCard title="Shipping Activity">
                    <VCardText>
                        <VTimeline truncate-line="both" align="start" side="end" line-inset="10" line-color="primary"
                            density="compact" class="v-timeline-density-compact">
                            <VTimelineItem dot-color="primary" size="x-small"
                                v-for="item in filteredOrders.shipping_activity" :key="item.id">
                                <div class="d-flex justify-space-between align-center mb-3">
                                    <span class="app-timeline-title"> {{ item.note }}</span>
                                    <span class="app-timeline-meta">{{ formatDateActviy(item.created_at) }}</span>
                                </div>
                                <p class="app-timeline-text mb-0">
                                    {{ item.short_description }}
                                </p>
                            </VTimelineItem>


                        </VTimeline>
                    </VCardText>
                </VCard>
            </VCol>
            <VCol cols="12" md="4">
                <VCard class="mb-6">
                    <VCardText>
                        <div class="d-flex align-center justify-space-between gap-1 mb-6">
                            <div class="text-body-1 text-high-emphasis font-weight-medium">
                                <v-icon class="mr-2" color="rgb(var(--v-theme-yellow))">mdi-calendar-clock</v-icon>
                                Appointment Details
                            </div>
                        </div>
                        <div class="appointment-details">
                            <div class="detail-item">
                                <span class="detail-label">Appointment At:</span>
                                <span class="detail-value">
    {{ getConvertedDate(convertUtcTime(filteredOrders.appointment_time, filteredOrders.appointment_date, filteredOrders.timezone)) }}
    at {{ getConvertedTime(convertUtcTime(filteredOrders.appointment_time, filteredOrders.appointment_date, filteredOrders.timezone)) }}
    </span>
                            </div>
                            <div class="detail-item" v-if="filteredOrders.start_time && filteredOrders.end_time">
                                <span class="detail-label">Start Time:</span>
                                <span class="detail-value">{{
        formatDate(filteredOrders.start_time)
    }}</span>
                            </div>
                            <div class="detail-item" v-if="filteredOrders.start_time && filteredOrders.end_time">
                                <span class="detail-label">End Time:</span>
                                <span class="detail-value">{{
        formatDate(filteredOrders.end_time)
    }}</span>
                            </div>
                            <div class="detail-item" v-if="filteredOrders.start_time && filteredOrders.end_time">
                                <span class="detail-label">Duration:</span>
                                <span class="detail-value">{{
        totalCallDuration(filteredOrders.start_time,
            filteredOrders.end_time) }}</span>
                            </div>
                        </div>
                    </VCardText>
                </VCard>
                <!-- 👉 Customer Details  -->
                <VCard class="mb-6" v-if="filteredOrders.telemed_pro.name">
                    <VCardText class="d-flex flex-column gap-y-6">
                        <h3>Provider Details</h3>

                        <div class="d-flex align-center">
                            <VAvatar :image="avatar1" class="me-3" style="display: none;" />
                            <VAvatar color="primary" class="me-3" size="30">
                                <VIcon icon="mdi-account" size="25" color="white" />
                            </VAvatar>
                            <div>
                                <div class="text-body-1 text-high-emphasis font-weight-medium">
                                    {{ filteredOrders.telemed_pro.name }}

                                </div>

                            </div>
                        </div>

                        <div class="d-flex align-center" style="display: none;">
                            <VAvatar variant="tonal" color="success" class="me-3" style="display: none;">
                                <VIcon icon="ri-shopping-cart-line" />
                            </VAvatar>

                            <!-- <h4 style="display: none;">
                                {{ filteredOrders.order_items.total_products }}
                                Products
                            </h4> -->
                        </div>

                        <div class="d-flex flex-column gap-y-1">
                            <div class="d-flex justify-space-between gap-1 text-body-2">
                                <h5>Contact Info</h5>
                            </div>
                            <span>Email:
                                {{ filteredOrders.telemed_pro.email }}</span>
                            <span>Mobile:
                                {{ filteredOrders.telemed_pro.phone_number }}</span>
                        </div>
                    </VCardText>
                </VCard>
                <VCard class="mb-6">
                    <VCardText>
                        <div class="d-flex align-center justify-space-between gap-1 mb-6">
                            <div class="text-body-1 text-high-emphasis font-weight-medium">
                                <v-icon class="mr-2" color="rgb(var(--v-theme-yellow))">mdi-truck-delivery</v-icon>
                                Shipping Address
                            </div>
                            <!-- <span
                                class="text-base text-primary font-weight-medium cursor-pointer"
                                @click="
                                    isEditAddressDialogVisible =
                                        !isEditAddressDialogVisible
                                "
                                >Edit</span
                            > -->
                        </div>
                        <div>
                            {{ filteredOrders.order.shipping_address1 }}
                            <br />
                            {{ filteredOrders.order.shipping_city }}
                            <br />
                            {{ filteredOrders.order.shipping_state }},
                            {{ filteredOrders.order.shipping_zipcode }}
                            <br />
                            {{ filteredOrders.order.shipping_country }}
                        </div>
                    </VCardText>
                </VCard>

                <!-- 👉 Billing Address -->
                <VCard style="display: none;">
                    <VCardText>
                        <div class="d-flex align-center justify-space-between gap-1 mb-3">
                            <div class="text-body-1 text-high-emphasis font-weight-medium">
                                Billing Address
                            </div>
                            <!-- <span
                                class="text-base text-primary font-weight-medium cursor-pointer"
                                @click="
                                    isEditAddressDialogVisible =
                                        !isEditAddressDialogVisible
                                "
                                >Edit</span
                            > -->
                        </div>
                        <div>
                            {{ filteredOrders.order.billing_address1 }}
                            <br />
                            {{ filteredOrders.order.billing_city }}
                            <br />
                            {{ filteredOrders.order.billing_state }},
                            {{ filteredOrders.order.billing_zipcode }}
                            <br />
                            {{ filteredOrders.order.billing_country }}
                        </div>

                        <!-- <div class="mt-6">
                            <h6 class="text-h6 mb-1">Mastercard</h6>
                            <div class="text-base">Card Number: ******4291</div>
                        </div> -->
                    </VCardText>
                </VCard>

            </VCol>


        </VRow>
    </div>

</template>
<style scoped>
.appointment-details {
    display: flex;
    flex-direction: column;
}

.detail-item {
    display: flex;
    margin-bottom: 10px;
}

.detail-label {
    font-weight: bold;
    min-width: 120px;
}

.detail-value {
    flex: 1;
}

::-webkit-scrollbar {
    width: 10px;
    /* Width of the scrollbar */
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* Color of the track */
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    /* Color of the handle */
    border-radius: 5px;
    /* Roundness of the handle */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* Color of the handle on hover */
}
</style>
