<template>
    <BsDrawer>
        <div class="tab-title bs-font-medium-4-semi-bold">
            Choice of products
        </div>

        <BsExpandableSection header-text="Filters" :expandable="true" selectorLabel="">
            <div class="flex-column-20">
                <div class="bs-font-medium-2-normal">
                    <div>Chart selection</div>
                    <div class="checkbox-item" v-for="graphType in Object.keys(chartSelection)" :key="graphType">
                        <BsCheckbox v-model="chartSelection[graphType].checked"></BsCheckbox>
                        <div>{{ graphType }}</div>
                    </div>
                </div>
                <GranularitySelection tag="elasticity" @update-filters="applyFilters">
                </GranularitySelection>
            </div>
        </BsExpandableSection>
    </BsDrawer>
    <EmptyState title="Elasticity" subtitle="Select goal and products in the left column to see the results in a chart"
        v-if="!selectedProducts || !selectedProducts.length"></EmptyState>
    <div class="flex-column-20" v-else>
        <BsWarning text="Explore the influence of markdown for each product on the profit and the volume of sales.">
        </BsWarning>
        <LineChart v-for="graphType in chartsToDisplay" :key="graphType" :title="chartSelection[graphType].title"
            :data="chartSelection[graphType].data"></LineChart>
    </div>
</template>

<script lang="ts">
import BsExpandableSection from "./BsExpandableSection.vue";
import GranularitySelection from "./view/GranularitySelection.vue";
import EmptyState from "./EmptyState.vue";
import BsWarning from "./BsWarning.vue";
import { API } from "../Api";
import LineChart from "./LineChart.vue";
import useProductStore from "../store/ProductStore";

export default {
    components: {
        BsExpandableSection,
        GranularitySelection,
        EmptyState,
        BsWarning,
        LineChart,
    },
    data() {
        return {
            selectedProducts: [] as string[],
            selectedGranularities: [] as string[],
            profitChecked: true,
            volumeChecked: true,
            chartSelection: {
                Profit: {
                    checked: true,
                    data: undefined,
                    title: "Profit Elasticity",
                },
                Volume: {
                    checked: true,
                    data: undefined,
                    title: "Sales Volume Elasticity",
                },
            },
        };
    },
    methods: {
        async applyFilters(newVal: any) {
            this.selectedProducts = newVal.products;
            this.selectedGranularities = newVal.granularities;
            for (const graphType of Object.keys(this.chartSelection)) {
                await this.fetchData(graphType);
            }
        },
        async fetchData(graphType: "Profit" | "Volume") {
            const store = useProductStore();
            if (!this.chartSelection[graphType].checked) return;
            try {
                store.loading = true
                const response = await API.getElasticity(
                    this.selectedProducts,
                    graphType
                );
                this.chartSelection[graphType].data = response.elasticity;
                this.chartSelection[graphType]!.data.yAxisName =
                    graphType === "Profit"
                        ? "Profit uplift %"
                        : "Sales volume uplift %";

            } catch {
                this.$emit("update:info", { type: "error", message: "Failed to retrieve elasticity" })
            } finally {
                store.loading = false;
            }
        },
    },
    computed: {
        chartsToDisplay() {
            return Object.keys(this.chartSelection).filter(
                (graphType) =>
                    this.chartSelection[graphType].checked &&
                    this.chartSelection[graphType].data
            );
        },
    },
    watch: {
        async 'chartSelection.Profit.checked'() {
            this.fetchData("Profit")
        },
        async 'chartSelection.Volume.checked'() {
            this.fetchData("Volume")
        },
    }
};
</script>
<style scoped lang="scss">
.checkbox-item {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

:deep(.q-checkbox__inner) {
    font-size: 24px !important;
}
</style>
