import API from "../../api.js";
import BusinessObjects from "../../lib/business_objects/business_objects.js";
import DOM from "../../dom.js";
import Events from "../../lib/events.js";
import TableBasePage from "../base_table.js";
import Utils from "../../lib/utils.js";
import Validation from "../../lib/validation.js";
import StoreTableMixinPage from "./mixin_table.js";

export default class PageStoreProductPermutations extends TableBasePage {
    static hash = hashPageStoreProductPermutations;
    static attrIdRowObject = attrIdProductPermutation;
    callSaveTableContent = API.saveProductPermutations;

    constructor(router) {
        super(router);
        this.storeMixin = new StoreTableMixinPage(this);
    }

    initialize() {
        this.sharedInitialize();
    }

    hookupFilters() {
        this.sharedHookupFilters();
        this.hookupFilterProductCategory();
        this.hookupFilterProduct();
        this.hookupFilterOutOfStock();
        this.hookupFilterMinStock();
        this.hookupFilterMaxStock();
    }
    hookupFilterProductCategory() {
        this.hookupFilter(flagProductCategory, (event, filterCategory) => {
            // loadPermutations();
            // let wasDirtyFilter = filterCategory.classList.contains(flagDirty);
            PageStoreProductPermutations.isDirtyFilter(filterCategory);
            let isDirtyFilter = filterCategory.classList.contains(flagDirty);
            let idProductCategory = DOM.getElementValueCurrent(filterCategory);
            let products = productCategories[idProductCategory];
            let filterProduct = document.querySelector(idFormFilters + ' .' + flagProduct);
            let idProductPrevious = filterProduct.getAttribute(attrValuePrevious);
            filterProduct.innerHTML = '';
            let optionJson, option;
            option = DOM.createOption(null);
            filterProduct.appendChild(option);
            products.forEach((product) => {
                optionJson = BusinessObjects.getOptionJsonFromObjectJson(product, idProductPrevious);
                option = DOM.createOption(optionJson);
                filterProduct.appendChild(option);
            });
            filterProduct.dispatchEvent(new Event('change'));
        });
    }
    hookupFilterProduct() {
        this.hookupFilter(flagProduct);
    }
    hookupFilterOutOfStock() {
        this.hookupFilter(flagIsOutOfStock);
    }
    hookupFilterMinStock() {
        this.hookupFilter(flagQuantityMin);
    }
    hookupFilterMaxStock() {
        this.hookupFilter(flagQuantityMax);
    }

    loadRowTable(rowJson) {
        if (rowJson == null) return;
        if (_verbose) { console.log("applying data row: ", rowJson); }
        /*
        let tableMain = TableBasePage.getTableMain();
        let row = _rowBlank.cloneNode(true);
        row.classList.remove(flagRowNew);
        let dllCategory = row.querySelector('td.' + flagProductCategory + ' select');
        dllCategory.value = rowJson[attrIdProductCategory];
        let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
        let optionJson, option;
        listProducts.forEach(function(product) {
            if (product[attrIdProductCategory] != rowJson[attrIdProductCategory]) return;
            optionJson = BusinessObjects.getOptionJsonFromObjectJson(product);
            option = DOM.createOption(optionJson, rowJson[attrIdProduct]);
            ddlProduct.appendChild(option);
        });
        ddlProduct.value = rowJson[attrIdProduct];
        row.querySelector('td.' + flagProductVariations + ' textarea').value = rowJson[flagProductVariations];
        let tdProductVariations = row.querySelector('td.' + flagProductVariations);
        let textareaProductVariations = tdProductVariations.querySelector('textarea');
        DOM.setElementValuesCurrentAndPrevious(textareaProductVariations, rowJson[flagProductVariations]);
        let thProductVariations = row.querySelector('td.' + flagProductVariations);
        if (!thProductVariations.classList.contains(flagCollapsed)) tdProductVariations.classList.remove(flagCollapsed);
        let inputDescription = row.querySelector('td.' + flagDescription + ' textarea');
        DOM.setElementValuesCurrentAndPrevious(inputDescription, rowJson[flagDescription]);
        let inputCostLocal = row.querySelector('td.' + flagCostLocal + ' input');
        DOM.setElementValuesCurrentAndPrevious(inputCostLocal, rowJson[flagCostLocal]);
        let tdCurrencyCost = row.querySelector('td.' + flagCurrencyCost);
        DOM.setElementAttributesValuesCurrentAndPrevious(tdCurrencyCost, rowJson[flagCurrencyCost]);
        let ddlCurrencyCost = tdCurrencyCost.querySelector('select');
        DOM.setElementValuesCurrentAndPrevious(ddlCurrencyCost, rowJson[flagCurrencyCost]);
        let inputProfitLocalMin = row.querySelector('td.' + flagProfitLocalMin + ' input');
        DOM.setElementValuesCurrentAndPrevious(inputProfitLocalMin, rowJson[flagProfitLocalMin]);
        let inputLatencyManufactureDays = row.querySelector('td.' + flagLatencyManufacture + ' input');
        DOM.setElementValuesCurrentAndPrevious(inputLatencyManufactureDays, rowJson[flagLatencyManufacture]);
        let inputQuantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
        DOM.setElementValuesCurrentAndPrevious(inputQuantityStock, rowJson[flagQuantityStock]);
        let inputQuantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
        DOM.setElementValuesCurrentAndPrevious(inputQuantityMin, rowJson[flagQuantityMin]);
        let inputQuantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
        DOM.setElementValuesCurrentAndPrevious(inputQuantityMax, rowJson[flagQuantityMax]);
        let inputQuantityStep = row.querySelector('td.' + flagCountUnitMeasurementPerQuantityStep + ' input');
        DOM.setElementValuesCurrentAndPrevious(inputQuantityStep, rowJson[flagCountUnitMeasurementPerQuantityStep]);



        row.querySelector('td.' + flagQuantityStock + ' input').value = rowJson[flagQuantityStock];
        row.querySelector('td.' + flagQuantityMin + ' input').value = rowJson[flagQuantityMin];
        row.querySelector('td.' + flagQuantityMax + ' input').value = rowJson[flagQuantityMax];
        row.querySelector('td.' + flagCostLocal).innerHTML = rowJson[flagCostLocal];
        row.setAttribute(attrIdProductCategory, rowJson[flagProductCategory]);
        row.setAttribute(attrIdProduct, rowJson[flagProduct]);
        row.setAttribute(attrIdProductPermutation, rowJson[attrIdProductPermutation]);
        let tbody = tableMain.querySelector('tbody');
        tbody.appendChild(row);
        */
    }
    getJsonRow(row) {
        if (row == null) return;
        let tdProductCategory = row.querySelector('td.' + flagProductCategory);
        let tdProduct = row.querySelector('td.' + flagProduct);
        let tdProductVariations = row.querySelector('td.' + flagProductVariations);
        let inputDescription = row.querySelector('td.' + flagDescription + ' textarea');
        // let inputCostLocalVatExcl = row.querySelector('td.' + flagCostUnitLocalVatExcl + ' input');
        // let inputCostLocalVatIncl = row.querySelector('td.' + flagCostUnitLocalVatIncl + ' input');
        let tdCurrencyCost = row.querySelector('td.' + flagCurrencyCost);
        let inputProfitLocalMin = row.querySelector('td.' + flagProfitLocalMin + ' input');
        let inputLatencyManufactureDays = row.querySelector('td.' + flagLatencyManufacture + ' input');
        let inputQuantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
        let inputQuantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
        let inputQuantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
        let inputQuantityStep = row.querySelector('td.' + flagCountUnitMeasurementPerQuantityStep + ' input');
        let tdUnitMeasurementQuantity = row.querySelector('td.' + flagUnitMeasurementQuantity);
        let checkboxIsSubscription = row.querySelector('td.' + flagIsSubscription + ' input');
        let inputCountIntervalRecurrence = row.querySelector('td.' + flagCountUnitMeasurementIntervalRecurrence + ' input');
        let tdUnitMeasurementIntervalRecurrence = row.querySelector('td.' + flagUnitMeasurementIntervalRecurrence);
        let inputIdStripeProduct = row.querySelector('td.' + flagIdStripeProduct + ' input');
        let checkboxDoesExpireFasterOnceUnsealed = row.querySelector('td.' + flagDoesExpireFasterOnceUnsealed + ' input');
        let inputCountIntervalExpirationUnsealed = row.querySelector('td.' + flagCountUnitMeasurementIntervalExpirationUnsealed + ' input');
        let tdUnitMeasurementIntervalExpirationUnsealed = row.querySelector('td.' + flagUnitMeasurementIntervalExpirationUnsealed);
        let buttonActive = row.querySelector(':scope > td.' + flagActive + ' button');

        let jsonRow = {};
        jsonRow[attrIdProductPermutation] = row.getAttribute(attrIdProductPermutation);
        jsonRow[attrIdProductCategory] = tdProductCategory.getAttribute(attrValueCurrent);
        jsonRow[attrIdProduct] = tdProduct.getAttribute(attrValueCurrent);
        jsonRow[flagProductVariations] = tdProductVariations.getAttribute(attrValueCurrent);
        jsonRow[flagHasVariations] = jsonRow[flagProductVariations] != '';
        jsonRow[flagDescription] = inputDescription.getAttribute(attrValueCurrent);
        // jsonRow[flagCostUnitLocalVatExcl] = inputCostLocalVatExcl.getAttribute(attrValueCurrent);
        // jsonRow[flagCostUnitLocalVatIncl] = inputCostLocalVatIncl.getAttribute(attrValueCurrent);
        jsonRow[flagCurrencyCost] = tdCurrencyCost.getAttribute(attrValueCurrent);
        jsonRow[flagProfitLocalMin] = inputProfitLocalMin.getAttribute(attrValueCurrent);
        jsonRow[flagLatencyManufacture] = inputLatencyManufactureDays.getAttribute(attrValueCurrent);
        jsonRow[flagQuantityStock] = inputQuantityStock.getAttribute(attrValueCurrent);
        jsonRow[flagQuantityMin] = inputQuantityMin.getAttribute(attrValueCurrent);
        jsonRow[flagQuantityMax] = inputQuantityMax.getAttribute(attrValueCurrent);
        jsonRow[flagCountUnitMeasurementPerQuantityStep] = inputQuantityStep.getAttribute(attrValueCurrent);
        jsonRow[flagUnitMeasurementQuantity] = tdUnitMeasurementQuantity.getAttribute(attrValueCurrent);
        jsonRow[flagIsSubscription] = checkboxIsSubscription.getAttribute(attrValueCurrent);
        jsonRow[flagCountUnitMeasurementIntervalRecurrence] = inputCountIntervalRecurrence.getAttribute(attrValueCurrent);
        jsonRow[flagUnitMeasurementIntervalRecurrence] = tdUnitMeasurementIntervalRecurrence.getAttribute(attrValueCurrent);
        jsonRow[flagIdStripeProduct] = inputIdStripeProduct.getAttribute(attrValueCurrent);
        jsonRow[flagDoesExpireFasterOnceUnsealed] = checkboxDoesExpireFasterOnceUnsealed.getAttribute(attrValueCurrent);
        jsonRow[flagCountUnitMeasurementIntervalExpirationUnsealed] = inputCountIntervalExpirationUnsealed.getAttribute(attrValueCurrent);
        jsonRow[flagUnitMeasurementIntervalExpirationUnsealed] = tdUnitMeasurementIntervalExpirationUnsealed.getAttribute(attrValueCurrent);
        jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
        return jsonRow;
    }
    initialiseRowNew(tbody, row) {
        this.initialiseRowNewDdlsProductCategoryAndProduct(row);

        let checkboxIsSubscription = row.querySelector('td.' + flagIsSubscription + ' input');
        let checkboxDoesExpireFasterOnceUnsealed = row.querySelector('td.' + flagDoesExpireFasterOnceUnsealed + ' input');
        this.handleChangeCheckboxDoesExpireFasterOnceUnsealed(null, checkboxDoesExpireFasterOnceUnsealed);
        this.handleChangeCheckboxIsSubscription(null, checkboxIsSubscription);
    }
    initialiseRowNewDdlsProductCategoryAndProduct(row) {
        let ddlCategoryFilter = document.querySelector(idFormFilters + ' #' + attrIdProductCategory);
        let idProductCategoryFilter = DOM.getElementValueCurrent(ddlCategoryFilter);
        let hasCategoryFilter = !(Validation.isEmpty(idProductCategoryFilter) || idProductCategoryFilter == '0');
        let ddlProductFilter = document.querySelector(idFormFilters + ' #' + attrIdProduct);
        let idProductFilter = DOM.getElementValueCurrent(ddlProductFilter);
        let hasProductFilter = !(Validation.isEmpty(idProductFilter) || idProductFilter == '0');
        if (_verbose) { 
            console.log("initialiseRowNew: ", row);
            console.log({ddlCategoryFilter, idProductCategoryFilter, hasCategoryFilter, ddlProductFilter, idProductFilter, hasProductFilter}); 
        }
        if (!hasCategoryFilter && !hasProductFilter) return;
        if (hasCategoryFilter) {
            let ddlCategory = row.querySelector('td.' + flagProductCategory + ' select');
            DOM.setElementValuesCurrentAndPrevious(ddlCategory, idProductCategoryFilter);
            this.handleChangeProductCategoryDdl(null, ddlCategory);
        }
        if (hasProductFilter) {
            let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
            DOM.setElementValuesCurrentAndPrevious(ddlProduct, idProductFilter);
        }
    }

    hookupTableMain() {
        super.hookupTableMain();
        this.hookupFieldsProductCategory();
        this.hookupProductFields();
        this.hookupFieldsProductPermutationVariation();
        this.hookupDescriptionTextareas();
        this.hookupCostFields();
        this.hookupLatencyManufactureInputs();
        this.hookupQuantityFields();
        this.hookupSubscriptionFields();
        this.hookupIdStripeProductInputs();
        this.hookupExpirationFields();
        this.hookupFieldsActive();
    }
    hookupFieldsProductCategory() {
        this.hookupTableCellDdlPreviews(
            idTableMain + ' td.' + flagProductCategory
            , Utils.getListFromDict(productCategories)
            , (cellSelector) => { this.hookupProductCategoryDdls(cellSelector); }
        );
    }
    hookupProductFields() {
        this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagProduct, Utils.getListFromDict(products));
    }

    hookupDescriptionTextareas() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagDescription + ' textarea');
    }
    hookupCostFields(){
        this.hookupCurrencyCostFields();
        this.hookupCostInputs();
    }
    hookupCurrencyCostFields(){
        this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagCurrencyCost, Utils.getListFromDict(currencies));
    }
    hookupCostInputs(){
        /*
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagCostUnitLocalVatExcl + ' input');
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagCostUnitLocalVatIncl + ' input');
        */
    }
    hookupProfitFields(){
        // this.hookupCurrencyProfitFields();
        this.hookupProfitInputs();
    }
    /*
    hookupCurrencyProfitFields(){
        this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagCurrency, Utils.getListFromDict(currencies));
    }
    */
    hookupProfitInputs(){
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagProfitLocalMin + ' input');
    }
    hookupLatencyManufactureInputs(){
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagLatencyManufacture + ' input');
    }
    hookupQuantityFields(){
        this.hookupQuantityMinInputs();
        this.hookupQuantityMaxInputs();
        this.hookupQuantityStockInputs();
        this.hookupCountUnitMeasurementPerQuantityStepInputs();
        this.hookupUnitMeasurementQuantityFields();
    }
    hookupQuantityMinInputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagQuantityMin + ' input');
    }
    hookupQuantityMaxInputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagQuantityMax + ' input');
    }
    hookupQuantityStockInputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagQuantityStock + ' input');
    }
    hookupCountUnitMeasurementPerQuantityStepInputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagCountUnitMeasurementPerQuantityStep + ' input');
    }
    hookupUnitMeasurementQuantityFields() {
        this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagUnitMeasurementQuantity, Utils.getListFromDict(unitMeasurements));
    }
    hookupSubscriptionFields() {
        this.hookupIsSubscriptionFields();
        this.hookupIntervalRecurrenceFields();
        this.hookupCountIntervalRecurrenceInputs();
    }
    hookupIsSubscriptionFields(){
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagIsSubscription + ' input', (event, element) => {
            this.handleChangeCheckboxIsSubscription(event, element);
        });
    }
    handleChangeCheckboxIsSubscription(event, element) {
        this.handleChangeNestedElementCellTable(event, element);
        let isSubscription = DOM.getElementValueCurrent(element);
        let row = DOM.getRowFromElement(element);
        let inputCountIntervalRecurrence = row.querySelector('td.' + flagCountUnitMeasurementIntervalRecurrence + ' input');
        let divOrDdlIntervalRecurrence = row.querySelector('td.' + flagUnitMeasurementIntervalRecurrence + ' .' + flagUnitMeasurementIntervalRecurrence);
        if (isSubscription) {
            inputCountIntervalRecurrence.classList.remove(flagCollapsed);
            divOrDdlIntervalRecurrence.classList.remove(flagCollapsed);
            let tdUnitMeasurementIntervalRecurrence = divOrDdlIntervalRecurrence.closest('td');
            tdUnitMeasurementIntervalRecurrence.dispatchEvent(new Event('click'));
        } else {
            inputCountIntervalRecurrence.classList.add(flagCollapsed);
            divOrDdlIntervalRecurrence.classList.add(flagCollapsed);
        }
    }
    hookupIntervalRecurrenceFields(){
        this.hookupTableCellDDlPreviewsWhenNotCollapsed(idTableMain + ' td.' + flagUnitMeasurementIntervalRecurrence, Utils.getListFromDict(unitMeasurementsTime));
    }
    hookupCountIntervalRecurrenceInputs(){
        this.hookupChangeHandlerTableCellsWhenNotCollapsed("change", idTableMain + ' td.' + flagCountUnitMeasurementIntervalRecurrence + ' input');
    }
    hookupIdStripeProductInputs(){
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagIdStripeProduct + ' input');
    }
    hookupExpirationFields(){
        this.hookupDoesExpireFasterOnceUnsealedCheckboxes();
        this.hookupIntervalExpirationUnsealedFields();
        this.hookupCountIntervalExpirationUnsealedInputs();
    }
    hookupDoesExpireFasterOnceUnsealedCheckboxes(){
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagDoesExpireFasterOnceUnsealed + ' input', (event, element) => { 
            this.handleChangeCheckboxDoesExpireFasterOnceUnsealed(event, element);
        });
    }
    handleChangeCheckboxDoesExpireFasterOnceUnsealed(event, element) {
        this.handleChangeNestedElementCellTable(event, element);
        let doesExpireFasterOnceUnsealed = DOM.getElementValueCurrent(element);
        let row = DOM.getRowFromElement(element);
        let inputCountIntervalExpirationUnsealed = row.querySelector('td.' + flagCountUnitMeasurementIntervalExpirationUnsealed + ' input');
        let divOrDdlIntervalExpirationUnsealed = row.querySelector('td.' + flagUnitMeasurementIntervalExpirationUnsealed + ' .' + flagUnitMeasurementIntervalExpirationUnsealed);
        if (doesExpireFasterOnceUnsealed) {
            inputCountIntervalExpirationUnsealed.classList.remove(flagCollapsed);
            divOrDdlIntervalExpirationUnsealed.classList.remove(flagCollapsed);
            let tdUnitMeasurementIntervalExpirationUnsealed = divOrDdlIntervalExpirationUnsealed.closest('td');
            tdUnitMeasurementIntervalExpirationUnsealed.dispatchEvent(new Event('click'));
        } else {
            inputCountIntervalExpirationUnsealed.classList.add(flagCollapsed);
            divOrDdlIntervalExpirationUnsealed.classList.add(flagCollapsed);
        }
    }
    hookupIntervalExpirationUnsealedFields(){
        this.hookupTableCellDDlPreviewsWhenNotCollapsed(idTableMain + ' td.' + flagUnitMeasurementIntervalExpirationUnsealed, Utils.getListFromDict(unitMeasurementsTime));
    }
    hookupCountIntervalExpirationUnsealedInputs(){
        this.hookupChangeHandlerTableCellsWhenNotCollapsed("change", idTableMain + ' td.' + flagCountUnitMeasurementIntervalExpirationUnsealed + ' input');
    }

    leave() {
        super.leave();
    }
}