<template>
    <BsDrawer>
        <BsExpandableSection header-text="Global filters" :expandable="true">
            <GranularitySelection tag="settings" @update-granularities="onUpdateGranularities"
                @update-filters="applySelection" />
        </BsExpandableSection>
        <BsExpandableSection header-text="Selected Products" selector-label="" :expandable="true"
            v-if="selectedRows.length">
            <BsWarning text='After making Product Selections, go to step 2. Markdown Customization. '
                style="max-width: 100%;"></BsWarning>
            <li v-for="row in selectedRows">
                {{ row.product_id }}
            </li>


        </BsExpandableSection>

    </BsDrawer>

    <div class="flex-column-20">
        <BsWarning v-if="!selectedGranularities.length">
            <div>
                <p>
                    Explore the detailed performances of all products and select which one you want to customize the
                    characteristics.
                </p>
            </div>
        </BsWarning>
        <div style="height: 700px">
            <BsTable dssTableName="display_table_by_product_id_prepared" title="Products" server-side-pagination="true"
                row-key="product_id" :model-value:selected="selectedRows" selection="multiple"
                @update:selection="updateSelection"
                :filters="productsFilters" />
        </div>
    </div>
</template>

<script>
import { ref } from "vue";
import useProductStore from "../../store/ProductStore.js";
import { storeToRefs } from "pinia";
import BsExpandableSection from "../BsExpandableSection.vue";
import GranularitySelection from "./GranularitySelection.vue";
import BsWarning from "../BsWarning.vue";

export default {
    components: { BsExpandableSection, GranularitySelection, BsWarning },

    setup() {
        const store = useProductStore();
        const { selectedRows, productsFilters } = storeToRefs(store);

        const selectedGranularities = ref([]);
        const onUpdateGranularities = (newVal) => {
            selectedGranularities.value = newVal;
        };
        const applySelection = (newVal) => {
            if (newVal.products.length) {
                productsFilters.value = { product_id: newVal.products };
            } else {
                productsFilters.value = null;
            }
        };
        const updateSelection = (newSelected) => {
            selectedRows.value = newSelected
        };

        return {
            selectedRows,
            productsFilters,
            selectedGranularities,
            applySelection,
            updateSelection,
            onUpdateGranularities,
        };
    },
};
</script>
