<template>
    <BsLayoutDefault ref="layoutRef">
        <BsTab name="Summary" docTitle="Summary" :docIcon="docLogo">
            <BsTabIcon>
                <img :src="firstTabIcon" alt="Summary Icon" />
            </BsTabIcon>
            <BsHeader>
                <Header
                    :title="headerTitle"
                    :subtitle="headerSubtitle"
                ></Header>
            </BsHeader>

            <BsContent>
                <BsContent>
                    <FirstTabContent></FirstTabContent>
                </BsContent>
            </BsContent>
        </BsTab>
        <BsTab
            icon="rule"
            name="Product settings"
            docTitle="Product selection, customization and optimization"
            :docIcon="docLogo"
        >
            <BsTabIcon>
                <img :src="secondTabIcon" alt="Product settings Icon" />
            </BsTabIcon>
            <BsHeader>
                <Header
                    :title="headerTitle"
                    :subtitle="headerSubtitle"
                ></Header>
            </BsHeader>
            <BsDrawer>
                <BsButton
                    flat
                    round
                    class="close-side-drawer-btn"
                    size="15px"
                    @click="closeSideDrawer"
                    icon="mdi-arrow-left"
                    style="z-index: 10000"
                ></BsButton>
            </BsDrawer>
            <BsContent>
                <ProductSettings @update:info="notifyUser" />
            </BsContent>
        </BsTab>
        <BsTab name="Elasticity" docTitle="Elasticity" :docIcon="docLogo">
            <BsTabIcon>
                <img :src="thirdTabIcon" alt="Elasticity Icon" />
            </BsTabIcon>
            <BsDrawer>
                <BsButton
                    flat
                    round
                    class="close-side-drawer-btn"
                    size="15px"
                    @click="closeSideDrawer"
                    icon="mdi-arrow-left"
                    style="z-index: 10000"
                ></BsButton>
            </BsDrawer>
            <BsHeader>
                <Header
                    :title="headerTitle"
                ></Header>
            </BsHeader>
            <BsContent>
                <Elasticity />
            </BsContent>
        </BsTab>
    </BsLayoutDefault>

</template>

<script lang="ts">
import docLogo from "./assets/images/doc-logo-example.svg";
import { watch, ref, onMounted, computed, reactive } from "vue";
import useProductStore from "./store/ProductStore.js";
import { API } from "./Api.ts";
import { storeToRefs } from "pinia";
import Header from "./components/Header.vue";
import Summary from "./components/Summary.vue";
import Elasticity from "./components/Elasticity.vue";
import { Loading, Notify, setCssVar } from "quasar";
import ProductSettings from "./components/view/ProductSettings.vue";
import FirstTabContent from "./components/FirstTabContent.vue";
import firstTabIcon from "./assets/images/first-tab-icon.svg";
import secondTabIcon from "./assets/images/second-tab-icon.svg";
import thirdTabIcon from "./assets/images/third-tab-icon.svg";
import { useLocalStorage } from "./components/composables/use-local-storage";

setCssVar("primary", "#2B66FF");
export default {
    setup() {
        const store = useProductStore();

        const data_row = ref([]);
        const context_summary = ref([{}]);
        const webAppId = () => {
            const urlObj = new URL(window.location.href).pathname;
            const keyWord = "webapps/";
            let start = urlObj.indexOf(keyWord);

            if (start !== -1) {
                // Add the length of keyWord to the start position to skip the keyword itself
                start += keyWord.length;
                // Find the next "_" after "webapps/"
                let end = urlObj.indexOf("_", start);
                return urlObj.substring(start, end !== -1 ? end : undefined);
            }
            return "";
        };
        store.webAppId = webAppId();
        const { selectedStore, forecast_granularity, currency, loading } =
            storeToRefs(store);
        const { data: customizedProducts } = useLocalStorage<
            Array<[string, any]>
        >(`${store.webAppId}.customizedProducts`, []);
        if (customizedProducts?.value!.length) {
            store.customizedProducts = new Map(customizedProducts.value);
            store.addAllCustomizedProductsToSelectedRows();
        }
        watch(
            () => store.customizedProducts,
            () => {
                customizedProducts.value = Array.from(
                    store.customizedProducts.entries()
                );
            },
            {
                deep: true,
            }
        );

        const headerTitle = computed(() => {
            return `Forecasting over ${context_summary.value[0].forecast_horizon} ${context_summary.value[0].forecast_time_granularity} after ${context_summary.value[0].max_date}`;
        });

        const headerSubtitle = computed(() => {
            return `Based on historical transactions from ${context_summary.value[0].min_date}`;
        });
        const layoutRef = ref(null);
        function closeSideDrawer() {
            layoutRef.value.drawerOpen = false;
        }
        function notifyUser(info: any) {
            if (info.type === "success") {
                Notify.create({
                    type: "positive",
                    message: info.message,
                    position: "top",
                    color: "positive-alert",
                    textColor: "positive-alert",
                    icon: "check",
                    classes: "bs-font-medium-1-semi-bold bs-alert-notification",
                    actions: [
                        {
                            icon: "close",
                            color: "positive-alert",
                            round: true,
                        },
                    ],
                });
            } else {
                Notify.create({
                    type: "negative",
                    message: info.message,
                    position: "top",
                    color: "negative-alert",
                    textColor: "negative-alert",
                    icon: "mdi-close-circle-outline",
                    classes: "bs-font-medium-1-semi-bold bs-alert-notification",
                    actions: [
                        {
                            icon: "close",
                            color: "negative-alert",
                            round: true,
                        },
                    ],
                });
            }
        }

        watch(loading, (newVal) => {
            newVal
                ? Loading?.show({
                      message: "Loading data ...",
                      boxClass: "bg-grey-2 text-grey-9",
                      spinnerColor: "primary",
                  })
                : Loading?.hide();
        });
        onMounted(() => {
            API.getDatasetData(
                "results_per_global_strategy_prepared",
                ""
            ).then((response) => {
                data_row.value = response["rows"];
                forecast_granularity.value = [
                    ...new Set(
                        data_row.value.map((item) => item.forecast_granularity)
                    ),
                ];
                selectedStore.value = "all_stores"//forecast_granularity.value[0];
            }),
                API.getDatasetData("context_summary_prepared", "").then(
                    (response) => {
                        context_summary.value = response["rows"];
                        API.getDemandForecastTimeScale().then((response) => {
                            context_summary.value[0] = {
                                ...context_summary.value[0],
                                ...response,
                            };
                        });
                    }
                ),
                API.getProjectVariable("currency_app", "").then((response) => {
                    currency.value = response;
                });
        });

        return {
            docLogo,
            headerTitle,
            headerSubtitle,
            notifyUser,
            closeSideDrawer,
            layoutRef,
            firstTabIcon,
            secondTabIcon,
            thirdTabIcon,
        };
    },
    components: {
        Header,
        Summary,
        Elasticity,
        ProductSettings,
        FirstTabContent,
    },
};
</script>
<style scoped>
.button {
    border-radius: 8px;
    background-color: #4caf50;
    color: white;
}

.button:hover {
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
        0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.spacing {
    margin-bottom: 2rem;
}

.container {
    display: flex;
}

.flex_display {
    display: flex;
    flex-direction: row;
    padding: 2%;
    width: 100%;
    justify-content: space-between;
}

.doc :deep() .h1_scale {
    font-size: 180%;
}

.doc :deep() .h2_scale {
    font-size: 150%;
}

.doc :deep() .img_scale {
    height: auto;
    max-width: 100%;
}

.card {
    width: 300px;
}

:deep(.charts-container) {
    display: flex;
    flex-direction: row;
    padding: 10px;
    /* flex-basis: calc(45% - 12x); */
}

:deep(.bar-chart) {
    flex-grow: 1;
    flex-basis: calc(45% - 12px);
}

:deep(.flex-column-20) {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
</style>
<style scoped>
body,
div {
    color: var(--text-and-icons-bs-color-text, #333e48);
}

:deep(.button-container) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
}

.btn-solution {
    position: relative;
    top: 10px;
}

:deep(.content) {
    padding: 20px;
}

.tab-content-section {
    margin-bottom: 20px;
}

.first-tab-target-info {
    display: flex;
    align-items: center;
    gap: var(--bs-spacing-13, 52px);
    min-height: 350px;
}

:deep(.tab-title) {
    color: #333e48;
    padding: var(--bs-spacing-1, 4px) var(--bs-spacing-1, 4px)
        var(--bs-spacing-2, 8px) 16px;
}

.close-side-drawer-btn {
    color: var(--interactions-bs-color-interaction-primary, #2b66ff);
    position: absolute;
    top: 3px;
    right: 10px;
}
:deep(.bs-tab-title) {
    background-color: white;
}

/* BS BTN STYLE TODO move to lib */
:deep(.bg-slider-inner-track) {
    background: var(
        --interactions-bs-color-interaction-selected-background,
        #d6e1fe
    );
}
@media (min-width: 2000px) {
    :deep(.q-tab-panel){
        max-width: 1200px;
    
    } 
    :deep(.content){
        max-width: 1500px;
    }
    
}

:deep(.bs-btn) {
    display: inline-flex;
    color: var(--text-and-icons-bs-color-text-with-background, #fff);
    padding: var(--bs-spacing-1, 4px) var(--bs-spacing-3, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--bs-spacing-1, 4px);
    border-radius: var(--bs-radius-samll-200, 4px);
    background: var(--interactions-bs-color-interaction-primary, #2b66ff);
    line-height: 22px;
}

:deep(.bs-btn:hover) {
    background: var(--interactions-bs-color-interaction-hover, #143384);
}

:deep(.bs-btn:disabled) {
    color: var(--text-and-icons-bs-color-text-light, #929292);
    background: var(--interactions-bs-color-interaction-disable, #e5e5e5);
}

/* Selector style TODO move to the lib */
:deep(.q-field__native),
:deep(.q-field--auto-height.q-field--dense .q-field__control),
:deep(.q-field--auto-height.q-field--dense .q-field__native),
:deep(.q-field--dense .q-field__marginal) {
    min-height: 26px;
}

:deep(.q-field__native),
:deep(.q-field--dense .q-field__marginal) {
    height: 26px;
    padding: var(--bs-spacing-05, 2px) var(--bs-spacing-0, 0px);
    color: #333e48;
}

:deep(.q-field--dense .q-field__marginal) {
    font-size: 16px;
}

:deep(.q-field--outlined .q-field__control) {
    border-radius: var(--bs-radius-small-100, 2px);
}

:deep(.q-item__label),
:deep(.q-item__section) {
    line-height: 22px;
    font-size: 14px;
}

:deep(.bs-select__popup .q-item) {
    height: auto;
    min-height: 20px;
}

/* TODO move this to lib and fix it for now it only work if added to the container component */
:deep(.q-item) {
    height: auto !important;
    min-height: 20px !important;
}

/* TODO move  */
:deep(.dku-tiny-text) {
    /* dku-tiny-text - 10px */
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
    /* 150% */
}

/* TODO move this to lib */
:deep(.bs-font-medium-1-bold) {
    /* bs-font-medium-1-bold */
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    /* 166.667% */
}
/* TODO move this to lib */
:deep(.bs-font-medium-2-bold) {
    /* bs-font-medium-1-bold */
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    /* 166.667% */
}

:deep(.bs-font-medium-1-normal) {
    /* bs-font-medium-1-normal */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 166.667% */
}

/* TODO move this to lib */
:deep(.bs-font-medium-3-semi-bold) {
    /* bs-font-medium-3-semi-bold */
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    /* 137.5% */
}

/* TODO move this to lib */
:deep(.bs-font-medium-2-normal) {
    /* bs-font-medium-2-normal */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 157.143% */
}

/* TODO move this to lib */
:deep(.bs-font-large-1-semi-bold) {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px;
    /* 166.667% */
}

/* TODO move this to lib */
:deep(.bs-font-medium-2-semi-bold) {
    /* bs-font-medium-2-semi-bold */
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    /* 157.143% */
}

/* TODO move this to lib */
:deep(.bs-font-medium-3-bold) {
    /* bs-font-medium-3-bold */
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
    /* 137.5% */
}

/* TODO move this to lib */
:deep(.bs-font-large-1-bold) {
    /* bs-font-large-1-bold */
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
    /* 166.667% */
}

/* TODO move this to lib */
:deep(.bs-font-medium-4-semi-bold) {
    /* bs-font-medium-4-semi-bold */
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    /* 160% */
}

/* TODO move this to lib */
:deep(.bs-font-medium-1-normal) {
    /* bs-font-medium-1-normal */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 166.667% */
}

/* TODO move this to lib */
:deep(.bs-font-medium-3-normal) {
    /* bs-font-medium-3-normal */
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 137.5% */
}

/* TODO move this to lib */
:deep(.bs-font-small-2-normal) {
    /* bs-font-small-2-normal */
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    /* 180% */
}

/* TODO move this to lib */
:deep(.bs-font-medium-1-normal-underline) {
    /* bs-font-medium-1-normal-underline */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 166.667% */
    text-decoration-line: underline;
}

/* TODO move to lib */
:deep(.q-tab.q-tab--active) {
    background: var(
        --information-bs-color-information-background,
        #d6e1fe
    ) !important;
}

:deep(.bs-slider input) {
    width: 48px;
    height: 20px;
    padding: var(--bs-spacing-1, 4px) var(--bs-spacing-2, 8px)
        var(--bs-spacing-1, 4px) var(--bs-spacing-1, 4px);
    align-items: center;
    border: 1px solid var(--base-colors-bs-color-border-light, #e5e5e5);
    background: var(--base-colors-bs-color-background, #fff);
    color: var(--text-and-icons-bs-color-text, #333e48);
    /* bs-font-medium-1-normal */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 166.667% */
}
</style>
<!-- todo move to lib -->
<style scss>
/* TODO move to lib maybe */
.bs-truncate-text {
    width: 100%;
    /* or whatever width you prefer */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.q-item {
    height: auto !important;
    min-height: 22px !important;
    padding: 0 8px;
}

.bs-select__popup .q-item.q-item--active {
    background-color: #fff;
}

.bs-select__popup .q-item {
    /* bs-font-medium-2-normal */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 157.143% */
}

.bs-select__popup .q-item.q-manual-focusable.q-manual-focusable--focused {
    background-color: var(--interactions-bs-color-interaction-primary, #2b66ff);
}

.q-field--outlined.q-field--readonly .q-field__control:before {
    border-style: solid;
}

.bs-header-wrapper.bs-header-wrapper--hide-tab-name {
    left: 0;
}

.disable {
    color: var(--interactions-bs-color-interaction-disable, #e5e5e5);
}

/* TODO move to lib */
.text-positive-alert {
    color: #0b590b !important;
}

.bg-positive-alert {
    background-color: #d7f0d6 !important;
}

.text-negative-alert {
    color: #ce1228 !important;
}

.bg-negative-alert {
    background-color: #f9e3e5 !important;
}

.bg-interactions-bs-color-interaction-selected {
    background: var(--interactions-bs-color-interaction-selected, #214ab5);
}

.text-interactions-bs-color-interaction-selected {
    color: var(--interactions-bs-color-interaction-selected, #214ab5);
}

/* TODO move this to lib */
.bs-font-medium-1-semi-bold {
    /* bs-font-medium-1-semi-bold */
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    /* 166.667% */
}

/* TODO move this to lib */
.bs-alert-notification {
    min-width: 600px;
    border-radius: var(--bs-radius-messages, 0px);
    box-shadow: none;
}
</style>
