<script setup>
import { computed, defineProps, ref } from 'vue';
const props = defineProps({
    date: {
        type: String,
        required: true,
    },
    time: {
        type: String,
        required: true,
    },
    timezone: {
        type: String,
        required: true,
    },
    timeDiff: {
        type: String,
        //required: true,
    },
    callEnd: {
        type: String,
        //required: true,
    }

})
const isDisableMeeting = ref(true);
const panel = ref(0)


const isMeetingEnable = computed(() => {
    console.log("computed", props.timeDiff);
    isAgentCall();
});


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

<template>
    <VCard class="text-center text-sm-start">
        <VRow no-gutters>
            <VCol>

                <VExpansionPanels v-model="panel">
                    <VExpansionPanel>
                        <VExpansionPanelTitle variant="tonal" color="primary">
                            <span><b>Lab Kit with a Virtual Provider Consultation. {{ isMeetingEnable }}</b> <br><br>
                                <p>{{ date }} Status: InProcess <br>
                                </p>
                                <p>Test Kit Tracking : <Routerview to="/"> To you</Routerview> / <Routerview to="/trt">
                                        back
                                        to Lab
                                    </Routerview>
                                </p>
                            </span>
                        </VExpansionPanelTitle>
                        <VExpansionPanelText>
                            <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>
                                            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="d-flex justify-space-between align-center flex-wrap">
                                            <!-- 👉 Avatar & Personal Info -->
                                            <div class="d-flex align-center mt-2">
                                                <div class="d-flex flex-column">
                                                    <p class="text-sm font-weight-medium text-high-emphasis mb-0">
                                                        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="rgb(var(--v-theme-yellow))">
                                                    Go to Meeting Test{{ callEnd }}
                                                </VBtn>
                                            </RouterLink>
                                            <span v-else>
                                                <VBtn class="mt-3" color="rgb(var(--v-theme-yellow))" disabled>Go to
                                                    Meeting Disabled
                                                </VBtn>
                                            </span>
                                            <!-- <RouterLink to="/meeting">
                                                <VBtn class="mt-3" color="error" :disabled="isDisableMeeting">Go to Meeting
                                                </VBtn>
                                            </RouterLink> -->

                                            <!-- Person Actions -->
                                        </div>


                                    </VTimelineItem>

                                    <VTimelineItem dot-color="rgb(var(--v-theme-yellow))"
                                        color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
                                        <template #icon>
                                            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>
                                                <b>eClicnic Attented</b><br><br>
                                            </div>
                                        </div>
                                    </VTimelineItem>
                                    <VTimelineItem dot-color="rgb(var(--v-theme-yellow))"
                                        color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
                                        <template #icon>
                                            5
                                        </template>
                                        <!-- 👉 Header -->
                                        <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                                            <div>
                                                <b>Medication Ordered</b>
                                            </div>
                                        </div>
                                    </VTimelineItem>
                                    <VTimelineItem dot-color="rgb(var(--v-theme-yellow))"
                                        color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
                                        <template #icon>
                                            6
                                        </template>
                                        <!-- 👉 Header -->
                                        <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                                            <div>
                                                <b>Medication Shipped</b>
                                            </div>
                                        </div>
                                    </VTimelineItem>
                                    <VTimelineItem dot-color="rgb(var(--v-theme-yellow))"
                                        color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
                                        <template #icon>
                                            7
                                        </template>
                                        <!-- 👉 Header -->
                                        <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                                            <div>
                                                <b>Medication Delivered</b>
                                            </div>
                                        </div>
                                    </VTimelineItem>
                                    <!-- !SECTION -->
                                </VTimeline>
                            </VCardText>
                        </VExpansionPanelText>
                    </VExpansionPanel>

                </VExpansionPanels>
                <VCardTitle class="text-start">Latest Labs <RouterLink to="/">
                        <span>(See all)</span>
                    </RouterLink>
                </VCardTitle>
                <VExpansionPanels class="mt-2">
                    <VExpansionPanel>
                        <VExpansionPanelTitle variant="tonal" color="rgb(var(--v-theme-yellow))">
                            <span><b>Lab Kit </b> <br><br>
                                <p>{{ date }} Status: Ordered <br>
                                </p>
                                <p>Test Kit Tracking : <Routerview to="/"> To you</Routerview> / <Routerview to="/trt">
                                        back
                                        to Lab
                                    </Routerview>
                                </p>
                            </span>
                        </VExpansionPanelTitle>
                        <VExpansionPanelText>
                            <h2 class="text-start">Results</h2>
                            <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>Ordered Hormone Test Kit</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>Shipped Hormone Test Kit</b><br><br>
                                            </div>
                                        </div>
                                    </VTimelineItem>

                                    <!-- SECTION Timeline Item: Interview Schedule -->
                                    <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>Delivered Hormone Test Kit</b><br><br>
                                            </div>
                                        </div>
                                    </VTimelineItem>

                                    <VTimelineItem dot-color="rgb(var(--v-theme-yellow))" color="error"
                                        icon="tabler-check" size="small">
                                        <template #icon>
                                            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>
                                                <b>Hormone Test Kit in Transit</b><br><br>
                                            </div>
                                        </div>
                                    </VTimelineItem>
                                    <VTimelineItem dot-color="secondary" color="primary" icon="tabler-check"
                                        size="small">
                                        <template #icon>
                                            5
                                        </template>
                                        <!-- 👉 Header -->
                                        <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                                            <div>
                                                <b>Lab Received Hormone Test Kit</b>
                                            </div>
                                        </div>
                                    </VTimelineItem>
                                    <VTimelineItem dot-color="secondary" color="primary" icon="tabler-check"
                                        size="small">
                                        <template #icon>
                                            6
                                        </template>
                                        <!-- 👉 Header -->
                                        <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                                            <div>
                                                <b>Provider Reviewed Test Results</b>
                                            </div>
                                        </div>
                                    </VTimelineItem>
                                    <!-- !SECTION -->
                                </VTimeline>
                            </VCardText>
                        </VExpansionPanelText>
                    </VExpansionPanel>

                </VExpansionPanels>




            </VCol>
        </VRow>
    </VCard>
</template>

<style lang="scss" scoped>
.v-timeline .v-timeline-divider__inner-dot {
    background-color: white !important;
}

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;
}

span.v-expansion-panel-title__icon {
    color: #fff
}
</style>
