<script setup>
import { hexToRgb } from "@layouts/utils";
import moment from "moment";
import { onBeforeMount, onMounted } from "vue";
import VueApexCharts from "vue3-apexcharts";
import { useTheme } from "vuetify";
import { useStore } from "vuex";
const vuetifyTheme = useTheme();
const store = useStore();
const total_sessions = ref();
const total_call_time = ref();
const avg_session_time = ref(0);
const getAnalytics = ref([]);
const getAnalyticsFilter = ref([]);
const monthly_session_count = ref([]);
const currentMonth = ref();
const refChart = ref(null);
const showGraph = ref(false);
const selectedFilter = ref(null);
const monthListf = ref([]);
const isHover = ref(false);

const currentTheme = "rgb(38 84 129 / 60%)";
const variableTheme = vuetifyTheme.current.value.variables;
const labelColor = `rgba(203 40 225 / 60%)`;
const labelPrimaryColor = `rgba(rgb(132 173 21 / 60%),0.1)`;
const series = ref([
    {
        data: [],
    },
]);

onMounted(async () => {
    console.log("refChart", refChart);
});
onBeforeMount(async () => {
    currentMonth.value = moment().format("MMMM") + "(Month to date)";
    console.log("cm", currentMonth.value);
    await store.dispatch("getAnalytics");
    getAnalytics.value = store.getters.getAnalytics;
    console.log("getAnalytics", getAnalytics.value);
    total_sessions.value = getAnalytics.value.total_sessions;
    total_call_time.value = getAnalytics.value.total_call_time;
    avg_session_time.value = getAnalytics.value.avg_session_time;
    // monthListf.value = getAnalytics.value.months_list;
    series.value[0].data = getAnalytics.value.data;
    const currentTheme = vuetifyTheme.current.value.colors;
    const variableTheme = vuetifyTheme.current.value.variables;
    const labelColor = `rgba(${hexToRgb(currentTheme["on-background"])})`;
    const labelPrimaryColor = `rgba(${hexToRgb(currentTheme.primary)},0.1)`;
    chartOptions.value.colors = [
        labelPrimaryColor,
        labelPrimaryColor,
        labelPrimaryColor,
        labelPrimaryColor,
        `rgba(${hexToRgb(currentTheme.primary)}, 1)`,
        labelPrimaryColor,
        labelPrimaryColor,
    ];

    chartOptions.value.xaxis.labels.style.colors = labelColor;
    chartOptions.value.xaxis.categories = getAnalytics.value.months_list;
    showGraph.value = true;
});
const chartOptions1 = computed(() => {
    return chartOptions.value;
});
const chartOptions = ref({
    chart: {
        type: "bar",
        toolbar: { show: false },
    },
    tooltip: { enabled: false },
    plotOptions: {
        bar: {
            barHeight: "60%",
            columnWidth: "40%",
            startingShape: "rounded",
            endingShape: "rounded",
            borderRadius: 5,
            distributed: true,
        },
    },
    grid: {
        show: false,
        padding: {
            top: -20,
            bottom: 0,
            left: -10,
            right: -10,
        },
    },
    colors: [
        "rgba(rgb(132 173 21 / 60%),0.1)",
        "rgba(rgb(132 173 21 / 60%),0.1)",
        "rgba(rgb(132 173 21 / 60%),0.1)",
        "rgba(rgb(132 173 21 / 60%),0.1)",
        `rgba('38 84 129 / 60%', 1)`,
        "rgba(rgb(132 173 21 / 60%),0.1)",
        "rgba(rgb(132 173 21 / 60%),0.1)",
    ],
    dataLabels: { enabled: false },
    legend: { show: false },
    xaxis: {
        categories: [],
        axisBorder: { show: false },
        axisTicks: { show: false },
        labels: {
            style: {
                colors: `rgba(203 40 225 / 60%)`,
                fontSize: "13px",
            },
        },
    },
    yaxis: { labels: { show: false } },
});
const filter = [
    {
        value: "This Month",
        key: "current_month",
    },
    {
        value: "Past Month",
        key: "1_month",
    },
    {
        value: "Past 2 Month from today",
        key: "2_months",
    },
    {
        value: "Past 3 Month from today",
        key: "3_months",
    },
    {
        value: "Past 6 Month from today",
        key: "6_months",
    },
    {
        value: "Past 12 Month from today",
        key: "12_months",
    },

    {
        value: "All Time",
        key: "all_time",
    },
];
const handleDateInput = async () => {
    await store.dispatch("getAnalyticsFilter", {
        filter: selectedFilter.value,
    });
    getAnalyticsFilter.value = store.getters.getAnalyticsFilter;
    console.log("getAnalyticsFilter", getAnalyticsFilter.value);
    total_sessions.value = getAnalyticsFilter.value.total_sessions;
    total_call_time.value = getAnalyticsFilter.value.total_call_time;
    avg_session_time.value = getAnalyticsFilter.value.avg_session_time;
    store.dispatch("updateIsLoading", false);
};
</script>

<template>
    <VRow class="mb-5">
        <VCol cols="12">
            <v-select
                v-model="selectedFilter"
                :items="filter"
                :label="currentMonth"
                item-title="value"
                item-value="key"
                @update:model-value="handleDateInput"
                prepend-inner-icon="mdi-calendar"
                density="compact"
                clearable
                class="custom-select"
            >
            </v-select>
        </VCol>
        <VCol cols="12" md="4" sm="6">
            <div>
                <VCard
                    class="logistics-card-statistics cursor-pointer"
                    :style="
                        isHover
                            ? `border-block-end-color: rgb(var(--v-theme-primary))`
                            : `border-block-end-color: rgba(var(--v-theme-primary),0.7)`
                    "
                    @mouseenter="isHover = true"
                    @mouseleave="isHover = false"
                >
                    <VCardText>
                        <div class="d-flex align-center gap-x-4 mb-2">
                            <VAvatar variant="tonal" color="yellow" rounded>
                                <VIcon icon="mdi-account-group" size="24" />
                            </VAvatar>
                            <h4 class="text-h5">Total Session</h4>
                        </div>
                        <h6 class="text-body-1 mb-2"></h6>
                        <div class="d-flex gap-x-2 align-center">
                            <div class="text-body-1 font-weight-medium me-2">
                                {{ total_sessions }}
                            </div>
                            <span class="text-sm text-disabled"
                                >Total session</span
                            >
                        </div>
                    </VCardText>
                </VCard>
            </div>
        </VCol>
        <VCol cols="12" md="4" sm="6">
            <div>
                <VCard
                    class="logistics-card-statistics cursor-pointer"
                    :style="
                        isHover
                            ? `border-block-end-color: rgb(var(--v-theme-warning))`
                            : `border-block-end-color: rgba(var(--v-theme-warning),0.7)`
                    "
                    @mouseenter="isHover = true"
                    @mouseleave="isHover = false"
                >
                    <VCardText>
                        <div class="d-flex align-center gap-x-4 mb-2">
                            <VAvatar variant="tonal" color="yellow" rounded>
                                <VIcon icon="mdi-timer" size="24" />
                            </VAvatar>
                            <h4 class="text-h5">Session Minutes</h4>
                        </div>
                        <h6 class="text-body-1 mb-2"></h6>
                        <div class="d-flex gap-x-2 align-center">
                            <div class="text-body-1 font-weight-medium me-2">
                                {{ total_call_time }}
                            </div>
                            <span class="text-sm text-disabled"
                                >Total Call Minutes
                            </span>
                        </div>
                    </VCardText>
                </VCard>
            </div>
        </VCol>
        <VCol cols="12" md="4" sm="6">
            <div>
                <VCard
                    class="logistics-card-statistics cursor-pointer"
                    :style="
                        isHover
                            ? `border-block-end-color: rgb(var(--v-theme-info))`
                            : `border-block-end-color: rgba(var(--v-theme-info),0.7)`
                    "
                    @mouseenter="isHover = true"
                    @mouseleave="isHover = false"
                >
                    <VCardText>
                        <div class="d-flex align-center gap-x-4 mb-2">
                            <VAvatar variant="tonal" color="yellow" rounded>
                                <VIcon icon="mdi-hourglass" size="24" />
                            </VAvatar>
                            <h4 class="text-h5">Avg Session Time</h4>
                        </div>
                        <h6 class="text-body-1 mb-2"></h6>
                        <div class="d-flex gap-x-2 align-center">
                            <div class="text-body-1 font-weight-medium me-2">
                                {{ avg_session_time }}
                            </div>
                            <span class="text-sm text-disabled"
                                >Avg Session Time
                            </span>
                        </div>
                    </VCardText>
                </VCard>
            </div>
        </VCol>
    </VRow>
    <VCard>
        <VCardText class="pt-6">
            <VRow>
                <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>

                <VCol cols="12" lg="4" md="4" sm="12" style="display: none">
                    <div class="d-flex align-center gap-4">
                        <v-icon size="42" color="rgb(var(--v-theme-yellow))"
                            >mdi-account-group</v-icon
                        >

                        <div class="d-flex flex-column">
                            <span class="text-h5 font-weight-medium mt-1">{{
                                total_sessions
                            }}</span>
                            <span
                                class="text-sm"
                                color="rgb(var(--v-theme-yellow))"
                            >
                                Total Session
                            </span>
                        </div>
                    </div>
                </VCol>
                <VCol cols="12" lg="4" md="4" sm="12" style="display: none">
                    <div class="d-flex align-center gap-4">
                        <v-icon size="42" color="rgb(var(--v-theme-yellow))"
                            >mdi-timer</v-icon
                        >

                        <div class="d-flex flex-column">
                            <span class="text-h5 font-weight-medium">{{
                                total_call_time
                            }}</span>
                            <span class="text-sm"> Session Minutes </span>
                        </div>
                    </div>
                </VCol>
                <VCol cols="12" lg="4" md="4" sm="12" style="display: none">
                    <div class="d-flex align-center gap-4">
                        <v-icon size="42" color="rgb(var(--v-theme-yellow))"
                            >mdi-hourglass</v-icon
                        >

                        <div class="d-flex flex-column">
                            <span class="text-h5 font-weight-medium">{{
                                avg_session_time
                            }}</span>
                            <span class="text-sm"> Avg Session Time </span>
                        </div>
                    </div>
                </VCol>
                <VueApexCharts
                    v-if="showGraph"
                    ref="refChart"
                    :options="chartOptions1"
                    :series="series"
                    :height="250"
                    :width="850"
                    class="graph-scroll"
                />
            </VRow>
        </VCardText>
    </VCard>
</template>
<style scoped>
@media (max-width: 576px) {
    .graph-scroll {
        overflow-x: scroll;
        overflow-y: hidden;
    }
}

.text-h4 {
    font-size: 1.5rem !important;
    font-weight: 500;
    line-height: 2.375rem;
    letter-spacing: normal !important;
    font-family: Public Sans, sans-serif, -apple-system, blinkmacsystemfont,
        Segoe UI, roboto, Helvetica Neue, arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", Segoe UI Symbol;
    text-transform: none !important;
}

.text-body-1 {
    font-size: 0.9375rem !important;
    font-weight: 400;
    line-height: 1.375rem;
    letter-spacing: normal !important;
    font-family: Public Sans, sans-serif, -apple-system, blinkmacsystemfont,
        Segoe UI, roboto, Helvetica Neue, arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", Segoe UI Symbol;
    text-transform: none !important;
}

.logistics-card-statistics {
    border-block-end-style: solid;
    border-block-end-width: 2px;

    &:hover {
        border-block-end-width: 3px;
        margin-block-end: -1px;

        transition: all 0.1s ease-out;
    }
}

.skin--bordered {
    .logistics-card-statistics {
        &:hover {
            margin-block-end: -2px;
        }
    }
}

.custom-select {
    width: 100%;
}

.custom-select :deep(.v-input__control) {
    min-height: 40px;
}

.custom-select :deep(.v-select__selection) {
    color: var(--v-primary-base);
    font-weight: 500;
}

.custom-select :deep(.v-input__slot) {
    border-color: var(--v-primary-lighten2) !important;
    transition: all 0.3s ease;
}

.custom-select:hover :deep(.v-input__slot) {
    border-color: var(--v-primary-base) !important;
    box-shadow: 0 0 0 1px var(--v-primary-base);
}

.text-sm {
    font-size: 13px;
    line-height: 1.25rem;
}
</style>
