<template>
    <div class="product-chart">
        <div>
            <h2>{{ $t('productPriceChangesChart') }}</h2>
            <Button v-bind="btns.close.props" @click="dialog.close()" />
        </div>
        <div>
            <p>{{ $t('priceFilterFrom') }}</p>
            <AppCalendar v-model="date.from" class="isax isax-note5" />
            <p>{{ $t('until') }}</p>
            <AppCalendar v-model="date.to" class="isax isax-note5" />
        </div>
        <Chart :data="chartData" :options="chartOptions" type="line" />
    </div>
</template>

<script setup>
import Chart from 'primevue/chart';

const { meta } = useRoute()
const { btns, chart } = meta.init

const dialog = inject('dialogRef')
const { pastPrices } = dialog.value.data

const date = reactive({})
const chartData = ref()
const chartOptions = ref()

onBeforeMount(() => {
    try {
        date.from = new Date(pastPrices[0].date).toLocaleDateString('fa')
        date.to = new Date(pastPrices[pastPrices.length - 1].date).toLocaleDateString('fa')
    } catch (error) { }
})

onMounted(() => {
    chartData.value = chart.setChartData(pastPrices, date)
    chartOptions.value = chart.setChartOptions()
})

watch(
    date,
    () => chartData.value = chart.setChartData(pastPrices, date),
    { deep: true }
)
</script>

<style lang="scss">
.product-chart {
    @apply w-full lg:w-[64rem] lg:h-[43.1rem] bg-white rounded-t-[0.6rem] lg:rounded-[0.6rem] flex flex-col lg:pb-[4.9rem];

    &>div:nth-of-type(1) {
        @apply flex justify-between items-center gap-3 p-6 lg:p-8 pb-6 lg:border-b-2 border-[#E5E5E5];

        h2 {
            @apply text-zinc-800 text-sm lg:text-xl font-bold font-vazir;
        }

        button {
            @apply -mx-4 -my-3;

            .p-button-icon {
                @apply text-[1.4em] lg:text-3xl text-[#191919];
            }
        }
    }

    &>div:nth-of-type(2) {
        @apply flex flex-wrap items-center gap-[1.1rem] p-6 lg:gap-6 lg:px-8 lg:py-10;

        &>p {
            @apply text-[#333333] first:w-full lg:first:w-max text-sm lg:text-lg font-medium font-vazir;
        }

        .p-calendar {
            @apply flex items-center gap-3 p-3 font-['iconsax'] #{!important};
            @apply w-32 h-11 lg:w-[10.4rem] lg:h-12 rounded-lg border-2 border-[#E5E5E5];

            &::before {
                @apply text-xl lg:text-2xl order-1;
            }

            &::after {
                @apply content-['_'] w-[0.1rem] h-4 bg-[#E5E5E5] order-2;
            }

            input {
                @apply border-none text-left bg-transparent shadow-none w-[6rem] order-3 p-0;
                @apply text-zinc-800 text-xs lg:text-lg font-normal font-vazir;
            }
        }
    }

    .p-chart {
        @apply w-[22.9rem] h-[21.2rem] lg:w-[59.3rem] lg:h-[24.3rem];
    }
}

body:has(.product-chart) {
    .p-datepicker {
        @apply lg:-translate-x-28;
    }
}
</style>
