<script setup>
import { computed, defineProps, nextTick, ref } from 'vue';
const isMeetingEnable = ref(false);
const eClinicSchedule = ref(false);
const eClicnicAttented = ref(true)
const eClicnicAttentedColor = ref('secondary')
const isMeetingEnd = ref(true);
const meetingInFuture = ref(true);
const props = defineProps({
    date: {
        type: String,
        required: true,
    },
    orderid: {
        type: String,
        required: true,
    },
    time: {
        type: String,
        required: true,
    },
    timezone: {
        type: String,
        required: true,
    },
    timeDiff: {
        type: String,
        //required: true,
    },
    showShipment: {
        type: String,
        required: true,
    },
    iscallEnd: {
        type: String,
        required: true,
    }
})
const panel = ref(0)
const treatmentPlan = computed(() => {
    let appDate = formatDateToISO(props.date);
    let appTime = convertTo24Hour(props.time);
    console.log("PlanCallend", props.iscallEnd, props.timeDiff, props.date, props.time, appDate, appTime, isDateTimeInFuture(props.date, props.time));
    meetingInFuture.value = isDateTimeInFuture(props.date, props.time)
    iscallEnd();
})
const iscallEnd = async () => {
    if (props.iscallEnd && !meetingInFuture.value) {
        isMeetingEnable.value = false;
        eClinicSchedule.value = false;
        eClicnicAttentedColor.value = 'rgb(var(--v-theme-yellow))';
        isMeetingEnd.value = false;
        console.log('Bth Conditin');
    }
    else if (props.iscallEnd) { // Call has been end
        isMeetingEnable.value = false;
        eClinicSchedule.value = false;
        isMeetingEnd.value = false;
        eClicnicAttentedColor.value = 'rgb(var(--v-theme-yellow))';
        console.log('callEnd');
    } else if (!meetingInFuture.value) { // Patient can Join Meeting
        isMeetingEnable.value = true;
        console.log('timeDiff');
    } else { // Call has been end
        console.log('else');
        isMeetingEnable.value = false;
        eClinicSchedule.value = true;
        isMeetingEnd.value = true;
    }
    await nextTick();
    // isAgentCall();
};
const isDateTimeInFuture = (dateString, timeString) => {
    // Combine the date and time strings into a datetime string
    const dateTimeString = dateString + " " + timeString;

    // Convert the datetime string into a Date object
    const eventDateTime = new Date(dateTimeString);

    // Get the current date and time
    const now = new Date();

    // Compare the eventDateTime with the current date and time
    return eventDateTime > now;
};
const formatDateToISO = (dateString) => {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');

    return `${year}-${month}-${day}`;
}
const convertTo24Hour = (time12h) => {
    const [time, period] = time12h.split(' ');
    const [hours, minutes] = time.split(':');

    let hours24;
    if (period === 'AM') {
        hours24 = hours === '12' ? '00' : hours.padStart(2, '0');
    } else {
        hours24 = hours === '12' ? '12' : String(parseInt(hours, 10) + 12).padStart(2, '0');
    }

    return `${hours24}:${minutes}:00`;
};
// const isMeetingEnable = computed(() => {
//     console.log("computed", props.timeDiff);
// });

// const isAgentCall = () => {
// let meetingTime = props.timeDiff;
// console.log("onMounted", meetingTime);
// isDisableMeeting.value = true;
// if (meetingTime == "0 days 0 hours 0 minutes 0 seconds") {
// return false;
// console.log("meetingTime", meetingTime);

// } else {
//     isDisableMeeting.value = false;
// }
// }
const togglePanel = (index) => {
    return panel.value = 0;
}
</script>

<template>
    <!-- <VCard class="text-center text-sm-start mb-2"> -->
    <VRow no-gutters>
        <VCol>
            <div v-if="treatmentPlan">
            </div>

            <VExpansionPanels v-model="panel" bg="rgb(var(--v-theme-yellow))">
                <VExpansionPanel @click.native.stop="togglePanel(0)" :disabled="true">
                    <VExpansionPanelTitle variant=" tonal" color="secondary">
                        <span class="font-color"><b>Lab Kit with a Virtual Provider Consultation. </b> <br><br>
                            <p>Order# {{ props.orderid }}</p>
                            <p>Appiontment: {{ date }} {{ props.time }} <br>
                            </p>



                        </span>
                    </VExpansionPanelTitle collapse-icon="mdi-chevron-right" expand-icon="mdi-chevron-down">
                    <VExpansionPanelText class="px-0 py-0">
                        <!-- <VCardText class="pt-0 px-0" variant=" tonal" color="white"
                            style="background-color: rgb(var(--v-theme-yellow)); padding-left:0">
                            <span class="font-color"><b>Lab Kit with a Virtual Provider Consultation. </b>
                                <p>{{ date }} Status: InProcess <br>
                                </p>
                                <p>Test Kit Tracking : <Routerview to="/"> To you</Routerview>

                                </p>
                            </span>
                        </VCardText> -->
                        <VCardText>

                            <VTimeline side="end" align="start" line-inset="8" truncate-line="both" density="compact">
                                <!-- SECTION Timeline Item: Flight -->
                                <VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">

                                    <!-- 👉 Header -->
                                    <div class="d-flex justify-space-between align-center gap-2 flex-wrap">
                                        <span class="app-timeline-title">
                                            <b>Medical History Form Completed</b><br><br>
                                        </span>
                                    </div>
                                </VTimelineItem>

                                <!-- !SECTION -->
                                <VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
                                    <!-- 👉 Header -->
                                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                                        <div class="app-timeline-title">
                                            <b>Online Consultation Scheduled</b><br><br>
                                        </div>
                                    </div>
                                </VTimelineItem>

                                <!-- SECTION Timeline Item: Interview Schedule -->
                                <VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
                                    <template #icon v-if="eClinicSchedule">
                                        3
                                    </template>
                                    <!-- 👉 Header -->
                                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                                        <div class="app-timeline-title">
                                            <b>eClinic Schedule is Confirmed for {{ date }}</b>
                                        </div>
                                    </div>

                                    <div class="justify-space-between align-center flex-wrap" v-if="isMeetingEnd">
                                        <!-- 👉 Avatar & Personal Info -->
                                        <div class="align-center mt-2">
                                            <div class="d-flex flex-column">
                                                <p
                                                    class="text-sm font-weight-medium text-high-emphasis mb-0 text-justify">
                                                    Your virtual consultation with your HGH provider is set for
                                                    <b>{{
                props.date }}, at {{ props.time }} , {{ props.timezone
                                                        }}</b> On
                                                    the appointment day, we will send you an
                                                    email containing the link
                                                    to join, along
                                                    with useful tips for preparation. If you have any inquiries or
                                                    need
                                                    to reschedule, feel free
                                                    to reach out via text at (223) 124-5533.
                                                </p>
                                            </div>

                                        </div>
                                        <!-- <RouterLink v-if="!isDisableMeeting" to="/queue">
                                                <VBtn class="mt-3" color="error">Go to Meeting
                                                </VBtn>
                                            </RouterLink> -->
                                        <RouterLink v-if="isMeetingEnable" to="/queue" target="_blank">
                                            <VBtn class="mt-3" color="rgb(var(--v-theme-yellow))">
                                                Go to Meeting
                                            </VBtn>
                                        </RouterLink>
                                        <span v-else>
                                            <VBtn class="mt-3" color="rgb(var(--v-theme-yellow))" disabled>Go to Meeting
                                            </VBtn>
                                        </span>
                                    </div>


                                </VTimelineItem>

                                <VTimelineItem :dot-color="eClicnicAttentedColor" :color="eClicnicAttentedColor"
                                    icon="tabler-check" size="small">
                                    <template #icon v-if="eClicnicAttented">
                                        4
                                    </template>
                                    <!-- <template #icon>
                                        <VIcon size="20" icon="tabler-circle-check" color="error" />
                                        </template> -->
                                    <!-- 👉 Header -->
                                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                                        <div class="app-timeline-title">
                                            <b>eClicnic Attented</b><br><br>
                                        </div>
                                    </div>
                                </VTimelineItem>
                                <VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
                                    <template #icon>
                                        5
                                    </template>
                                    <!-- 👉 Header -->
                                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                                        <div class="app-timeline-title">
                                            <b>Medication Ordered</b>
                                        </div>
                                    </div>
                                </VTimelineItem>
                                <VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
                                    <template #icon>
                                        6
                                    </template>
                                    <!-- 👉 Header -->
                                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                                        <div class="app-timeline-title">
                                            <b>Medication Shipped</b>
                                        </div>
                                    </div>
                                </VTimelineItem>
                                <VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
                                    <template #icon>
                                        7
                                    </template>
                                    <!-- 👉 Header -->
                                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                                        <div class="app-timeline-title">
                                            <b>Medication Delivered</b>
                                        </div>
                                    </div>
                                </VTimelineItem>
                                <!-- !SECTION -->
                            </VTimeline>
                            <VRow class="mt-4" v-if="props.showShipment">
                                <VCol cols="12" md="8">
                                    <h3 class="mb-4">Treatment Plan</h3>
                                    <VDivider></VDivider>
                                    <h4 class="mt-4">Lab Kit</h4>
                                </VCol>
                                <VCol cols="12" md="4">
                                    <h3 class="mb-4">Shipment Address:</h3>
                                    <p>{{ props.showShipment }}</p>
                                    <RouterLink class="text-primary" to="/">
                                        Edit Address
                                    </RouterLink>
                                </VCol>
                            </VRow>
                        </VCardText>
                    </VExpansionPanelText>
                </VExpansionPanel>

            </VExpansionPanels>




        </VCol>
    </VRow>
    <!-- </VCard> -->
</template>

<style lang="scss" scoped>
.v-timeline .v-timeline-divider__inner-dot {
    background-color: rgb(var(--v-theme-yellow)) !important;
}

.font-color {
    color: rgb(var(--v-theme-yellow)) #32475cde;
}

button.v-expansion-panel-title {
    background-color: rgb(var(--v-theme-yellow)) !important;
    color: #fff;
}

button.v-expansion-panel-title.bg-secondary {
    background-color: rgb(var(--v-theme-yellow)) !important;
    color: #fff;
}

button.v-expansion-panel-title {
    background-color: rgb(var(--v-theme-yellow)) !important;
    color: #fff;
}

.v-expansion-panel-text__wrapper {
    padding: 0 !important;
}

button.v-expansion-panel-title.v-expansion-panel-title--active {
    background-color: rgb(var(--v-theme-yellow)) !important;
    color: #fff;
}

span.v-expansion-panel-title__icon {
    color: rgb(var(--v-theme-yellow)) !important;
    display: none !important;
}

.v-expansion-panel {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.v-expansion-panel:hover {
    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
}

.v-expansion-panel-title {
    padding: 15px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.v-expansion-panel-title.pt-0 {
    padding-top: 0;
}

// .v-expansion-panel-title:hover {
//     background-color: #f9f9f9;
//     color: #222;
// }

.v-expansion-panel-title .mdi {
    font-size: 20px;
    color: #666;
    transition: transform 0.3s ease, color 0.3s ease;
}

.v-expansion-panel-title.v-expansion-panel-title--active .mdi {
    transform: rotate(180deg);
    color: #222;
}

.v-expansion-panel-text {
    padding: 10px 15px;
    font-size: 13px;
    color: #555;
    border-top: 1px solid #eee;
}

.v-expansion-panel-text .d-flex {
    margin-bottom: 24px;
}

.v-expansion-panel-text .d-flex>div {
    flex: 1;
}

.v-expansion-panel-text p {
    margin-bottom: 16px;
    font-size: 14px;
}

.v-expansion-panel-text h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #333;
}
</style>
