<template>
    <div class="seller-chart">
        <Dropdown v-model="period" :options="options" optionValue="value" optionLabel="label">
            <template #dropdownicon>
                <i class="isax isax-arrow-bottom" />
            </template>
        </Dropdown>

        <Chart type="pie" :data="chartData" :options="chartOptions" />
    </div>
</template>

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

const chartData = ref();
const chartOptions = ref();

const setChartData = () => {
    const documentStyle = getComputedStyle(document.body);

    return {
        labels: ['سود', 'درآمد', 'فروش'],
        datasets: [
            {
                data: [21451000, 20123000, 10000000],
                backgroundColor: ['#FF6384', '#FF9F40', '#4BC0C0'],
                hoverBackgroundColor: ['#FF6384cc', '#FF9F40cc', '#4BC0C0cc']
            }
        ]
    };
};

const setChartOptions = () => {
    return {
        plugins: {
            legend: {
                labels: {
                    usePointStyle: true,
                    color: '#333333',
                    pointStyle: 'rect',
                    pointStyleWidth: 20,
                    font: {
                        family: 'vazir',
                        size: 14
                    }

                },
                position: 'bottom',
                rtl: true
            },
            tooltip: {
                backgroundColor: '#050B20',
                bodyFont: 'vazir',
                bodyColor: 'white',
                rtl: true,
                displayColors: false,
                callbacks: {
                    title: () => null
                }
            }
        }
    };
};

const { t } = inject('service')
const options = reactive([
    { label: t('thisWeek'), value: 'weekly' }
])
const period = ref('weekly')

onMounted(() => {
    chartData.value = setChartData();
    chartOptions.value = setChartOptions();
});
</script>

<style lang="scss">
.seller-chart {
    @apply w-[21.4rem] h-[25.4rem] lg:w-[18.3rem] lg:h-[22.8rem] rounded-[0.6rem] border-2 border-[#E5E5E5] p-3;
    @apply flex flex-col gap-[1.1rem] max-xl:hidden lg:hidden xl:flex;

    .p-dropdown {
        @apply w-[5.6rem] h-[2.4rem] lg:w-[6.5rem] lg:h-[2.6rem] bg-[#F2F2F2] rounded-[0.6rem] text-[#5D5D5D] border-none;

        .p-dropdown-trigger {
            @apply w-max translate-x-2;

            i {
                @apply text-base lg:text-lg;
            }
        }


        span {
            @apply p-3 h-max w-max pl-0 font-vazir text-xs lg:text-sm #{!important};
        }
    }

}
</style>