<template>
    <div class="flex-column-20">
        <BsWarning>
            <div>
                <p>
                    You can choose your optimization strategy and edit the
                    product attributes and the markdown optimization
                    constraints.
                </p>
                <p>
                    After you've done your changes, save them with "Save Customization"
                </p>
                <p>
                    Once the Optimization was completed, go to step 3. Customization
                    results.
                </p>
            </div>
        </BsWarning>
        <div class="flex-column-20" style="max-width: 800px; min-width: 400">
            <div class="product-name">{{ initialProduct.productId }}</div>
            <div class="product-strategy">
                <div class="bs-font-medium-2-normal">
                    Strategy Optimization
                    <BsInfoTooltip
                        text='Select which KPI is maximized during the optimization. In "Balanced" strategy, we maximize the weighted average of the profit and volume increase.'
                    ></BsInfoTooltip>
                </div>
                <BsSelect
                    v-model="currentState.strategy"
                    :options="strategyOptions"
                    :style="{ 'max-width': '228px' }"
                >
                </BsSelect>
            </div>
            <div class="btn-container">
                <BsButton
                    class="bs-font-medium-2-normal reset-values-btn"
                    unelevated
                    dense
                    no-caps
                    @click="resetValues()"
                >
                    Reset all values</BsButton
                >
            </div>
            <div class="flex_display">
                <div class="flex_column" style="width: 30%">
                    <div class="section-title">
                        Product attributes
                        <BsInfoTooltip
                            text="You can update the product characteristics to match your current situation"
                        ></BsInfoTooltip>
                    </div>
                    <div>
                        <div class="bs-font-medium-2-normal">Product cost</div>
                        <div class="bs-font-medium-1-normal">
                            Initial value: {{ initialProduct.productCost }}
                        </div>
                        <QInput
                            class="bs-input-field"
                            type="number"
                            debounce="2000"
                            v-model="currentState.productCost"
                            outlined
                            dense
                            padding="0"
                            :step="0.01"
                            :min="0"
                            :style="{ 'max-width': '100px' }"
                        />
                    </div>

                    <div>
                        <div class="bs-font-medium-2-normal">Base price</div>
                        <div class="bs-font-medium-1-normal">
                            Initial value:
                            {{ initialProduct.basePrice }}
                        </div>
                        <QInput
                            class="bs-input-field"
                            type="number"
                            debounce="2000"
                            v-model="currentState.basePrice"
                            outlined
                            dense
                            padding="0"
                            :step="0.01"
                            :min="0"
                            :style="{ 'max-width': '100px' }"
                        />
                    </div>
                    <!-- <div>
                        <div class="bs-font-medium-2-normal">
                            Available stock
                        </div>
                        <div class="bs-font-medium-1-normal">
                            Initial value:
                            {{ initialProduct.availableStock }}
                        </div>
                        <QInput
                            class="bs-input-field"
                            type="number"
                            debounce="2000"
                            v-model="currentState.availableStock"
                            outlined
                            dense
                            padding="0"
                            :step="0.01"
                            :min="0"
                            :style="{ 'max-width': '100px' }"
                        />
                    </div> -->
                </div>
                <div class="flex_column" style="width: 70%">
                    <div class="section-title">
                        Markdown optimization constraints
                        <BsInfoTooltip
                            text="Customize the markdown constraints for this product"
                        ></BsInfoTooltip>
                    </div>
                    <div>
                        <div class="bs-font-medium-2-normal">
                            Balance coefficient
                            <BsInfoTooltip
                                text="Ratio of the profit uplift and the volume uplift considered in the balanced optimization scenario"
                            ></BsInfoTooltip>
                        </div>
                        <div class="bs-font-medium-1-normal">
                            Initial value: Volume uplift:
                            {{ initialProduct.volume }} and Profit uplift:
                            {{ initialProduct.profit }}
                        </div>
                        <Balancer
                            :profit="currentState.profit"
                            :volume="currentState.volume"
                            @update:values="onBalanceCoefficientUpdate"
                        ></Balancer>
                    </div>
                    <div>
                        <div class="bs-font-medium-2-normal">
                            Markdown Range
                            <BsInfoTooltip
                                text="During the optimization, the markdown will be selected inside this range for this product"
                            ></BsInfoTooltip>
                        </div>
                        <div class="bs-font-medium-1-normal">
                            Initial value: {{ initialProduct.minMarkdown }}% to
                            {{ initialProduct.maxMarkdown }}%
                        </div>
                        <BsInputRange
                            title=""
                            v-model="currentState.markdown"
                            :min="-100"
                            :max="100"
                            step="1"
                        />
                    </div>
                </div>
            </div>

            <div class="btn-container">
                <BsButton
                    class="bs-btn bs-font-medium-2-normal save-btn"
                    unelevated
                    dense
                    no-caps
                    @click="save"
                    :disable="store.scenarioRunId || !isCustomized"
                >
                    Save customization
                </BsButton>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import useProductStore from "../store/ProductStore";
import { defineComponent } from "vue";
import Balancer from "./Balancer.vue";
import BsInfoTooltip from "./BsInfoTooltip.vue";
import BsInputRange from "./BsInputRange.vue";
import BsWarning from "./BsWarning.vue";
import { QInput } from "quasar";
const emptyState = {
    productCost: 0,
    basePrice: 0,
    availableStock: 0,
    volume: 0,
    profit: 0,
    markdown: { min: 0, max: 0 },
    strategy: "",
};
export default defineComponent({
    data() {
        return {
            store: undefined as undefined | any,
            initialProduct: undefined as undefined | any,
            currentState: { ...emptyState },
            strategyOptions: ["profit", "volume", "balanced"],
            isCustomized: false,
        };
    },
    beforeMount() {
        this.store = useProductStore();
        this.initUI();
    },
    watch: {
        "store.selectedRow"() {
            this.initUI();
        },
        currentState: {
            handler() {
                this.isCustomized = true;
            },
            deep: true,
        },
    },
    methods: {
        getValues(key: string): any {
            const selectedRow = this.store.selectedRow;
            return selectedRow && selectedRow[key]
                ? {
                      productId: selectedRow[key]["product_id"],
                      basePrice:
                          selectedRow[key][
                              "reference_period_product_base_price"
                          ],
                      productCost: selectedRow[key]["product_cost"],
                      profit: selectedRow[key]["profit_parameter"],
                      volume: selectedRow[key]["volume_parameter"],
                      markdown: {
                          min: selectedRow[key]["min_markdown"] * 100,
                          max: selectedRow[key]["max_markdown"] * 100,
                      },
                      minMarkdown: -100,
                      maxMarkdown: 100,
                      availableStock: selectedRow[key]["stock"],
                      strategy: selectedRow[key]["optimization_strategy"],
                  }
                : {};
        },
        initUI() {
            this.initialProduct = this.getValues("initial");
            this.currentState = {
                ...this.initialProduct,
                ...this.getValues("current"),
            };
        },
        resetValues() {
            this.currentState = { ...this.initialProduct };
            this.isCustomized = true;
        },
        save() {
            this.isCustomized = false;
            const newProduct = {
                product_id: this.initialProduct.productId,
                profit_parameter: this.currentState.profit * 1,
                volume_parameter: this.currentState.volume * 1,
                product_cost: this.currentState.productCost * 1,
                max_markdown: this.currentState.markdown.max / 100,
                min_markdown: this.currentState.markdown.min / 100,
                reference_period_product_base_price:
                    this.currentState.basePrice * 1,
                optimization_strategy: this.currentState.strategy,
                stock: this.currentState.availableStock * 1,
                timestamp: new Date().getTime(),
            };
            this.store.addCustomizedRow(newProduct);
            this.$emit("update:info", {
                type: "success",
                message: `Customization for ${this.initialProduct.productId} successfully saved `,
            });
        },
        onBalanceCoefficientUpdate(newVal: { profit: number; volume: number }) {
            this.currentState.profit = newVal.profit;
            this.currentState.volume = newVal.volume;
        },
    },
    components: { Balancer, BsInfoTooltip, BsInputRange, BsWarning, QInput },
});
</script>

<style scoped>
.container {
    display: flex;
}

.flex_display {
    display: flex;
    flex-direction: row;
}

.flex_column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: var(--bs-spacing-4, 0px);
}

.container_grid {
    display: grid;
    grid-template-columns: 0.4fr 0.3fr 0.3fr;
    grid-column-gap: 10px;
    grid-row-gap: 15px;
}

.card {
    width: 300px;
}
.product-name {
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.section-title {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.btn-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: end;
    padding: var(--bs-spacing-2, 8px) var(--bs-spacing-0, 0px)
        var(--bs-spacing-3, 12px) var(--bs-spacing-0, 0px);
}
.reset-values-btn {
    padding: 6px 8px;
    color: #4578fc;
    border-radius: 4px;
    border: 1px solid #4578fc;
    background: #fff;
}
.save-btn {
    /* color: white; */
    border-radius: 4px;
    background: #4578fc;
    padding: 6px 8px;
}
:deep(.q-field--outlined .q-field__control) {
    padding: 0 8px !important;
    height: 28px;
    font-size: 12px;
}
</style>
