<template>
    <div class="flex-column-20">
        <div style="overflow-y: scroll">
            <!-- <BsButton class="button" @click="clearCache"> Clear Storage </BsButton> -->
            <DemandForecastParameters
                v-if="frontendParameters"
                :tag="tag"
                :frontend-parameters="frontendParameters"
                @update:selected-granularities="updateSelectedGranularities"
                @update:selected-products="updateSelectedProducts"
            >
            </DemandForecastParameters>
            <!--<BsSelect
                        v-model="selectedProducts"
                        :options="productsOptions"
                        clear-icon="clear"
                        use-input
                        multiple
                        @filter="filterFn"
                        clearable
                        input-debounce="0"
                    >
            </BsSelect>-->
        </div>
        <div class="button-container">
            <BsButton
                class="bs-btn dku-text"
                unelevated
                padding="4"
                :disable="
                    !selectedProducts || !selectedProducts.length || disableBtn
                "
                @click="applyFilters"
                >Apply filters</BsButton
            >
        </div>
    </div>
</template>

<script lang="ts">
import { ref } from "vue";
import { isEmpty } from "lodash";
import { API } from "../../Api";
import DemandForecastParameters from "../DemandForecastParameters.vue";
import { FrontendParameters } from "../model";
import useProductStore from "../../store/ProductStore";

export default {
    setup(props, { emit }) {
        const disableBtn = ref(false);
        const selectedProducts = ref<String[]>([]);
        const productsOptions = ref<String[]>([]);
        const productsInitial = ref<String[]>([]);
        const selectedGranularities = ref<String[]>([]);
        const filters = ref({
            granularities: [] as string[],
            products: [] as string[],
        });
        const frontendParameters = ref<FrontendParameters | undefined>();
        const store = useProductStore();
        store.loading = true;
        API.getParameters()
            .then((response) => {
                frontendParameters.value = response;
            })
            .catch((err) => console.log("Failed to retrieve filters"))
            .finally(() => (useProductStore().loading = false));


        function updateSelectedGranularities(granularities: string[]) {
            selectedGranularities.value = granularities;
            disableBtn.value = false;
            emit("update-granularities", filters.value);
            if (isEmpty(selectedGranularities.value)) {
                selectedProducts.value = [];
                applyFilters();
            }
        }
        API.getProducts()
            .then((response) => {
                productsOptions.value = response.products;
                productsInitial.value = response.products;
                console.log('productsOptions:', productsOptions.value)
            })
            .catch((err) => console.log("Failed to retrieve filters"))
            .finally(() => (useProductStore().loading = false));

        
        function updateSelectedProducts(products: string[]) {
            selectedProducts.value = products;
            console.log('selectedProducts.value:', selectedProducts.value)
            disableBtn.value = false;
            emit("update-products", filters.value);
            if (isEmpty(selectedProducts.value)) {
                selectedProducts.value = [];
                applyFilters();
            }
        }
        function filterFn(val: string, update: any) {
            update(() => {
                const needle = val.toLowerCase();
                console.log('productsOptions filter init:', productsOptions.value)
                console.log('productsInitial:', productsInitial.value)
                productsOptions.value = productsInitial.value.filter(
                    (v) => v.toLowerCase().indexOf(needle) > -1
                );
                console.log('productsOptions filter post:', productsOptions.value)

            });
        }
        function applyFilters() {
            disableBtn.value = true;
            filters.value = {
                granularities: selectedGranularities.value,
                products: selectedProducts.value,
            };
            emit("update-filters", filters.value);
        }

        return {
            updateSelectedGranularities,
            updateSelectedProducts,
            filterFn,
            disableBtn,
            frontendParameters,
            productsOptions,
            selectedProducts,
            applyFilters,
            isEmpty,
        };
    },
    components: {
        DemandForecastParameters,
    },
    props: {
        tag: {
            type: String,
            default: "",
        },
    },
};
</script>

<style scoped>
.button {
    border-radius: 8px;
    background-color: #7c807c;
    color: white;
}
</style>
