import API from "../../api.js";
import BusinessObjects from "../../lib/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 PageStoreSuppliers extends TableBasePage {
    static hash = hashPageStoreSuppliers;
    static attrIdRowObject = attrIdSupplier;
    callFilterTableContent = API.getSuppliersByFilters;
    callSaveTableContent = API.saveSuppliers;

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

    initialize() {
        this.sharedInitialize();
    }

    hookupFilters() {
        this.sharedHookupFilters();
        this.hookupFilterActive();
    }

    loadRowTable(rowJson) {
    }
    getJsonRow(row) {
        if (row == null) return;
        let textareaNameCompany = row.querySelector('td.' + flagNameCompany + ' textarea');
        let textareaNameContact = row.querySelector('td.' + flagNameContact + ' textarea');
        let textareaDepartmentContact = row.querySelector('td.' + flagDepartmentContact + ' textarea');
        let tdAddress = row.querySelector('td.' + flagAddress);
        let textareaPhoneNumber = row.querySelector('td.' + flagPhoneNumber + ' textarea');
        let textareaFax = row.querySelector('td.' + flagFax + ' textarea');
        let textareaEmail = row.querySelector('td.' + flagEmail + ' textarea');
        let textareaWebsite = row.querySelector('td.' + flagWebsite + ' textarea');
        let tdCurrency = row.querySelector('td.' + flagCurrency);
        let checkboxActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');

        let jsonRow = {};
        jsonRow[attrIdSupplier] = row.getAttribute(attrIdSupplier);
        jsonRow[flagNameCompany] = DOM.getElementAttributeValueCurrent(textareaNameCompany);
        jsonRow[flagNameContact] = DOM.getElementAttributeValueCurrent(textareaNameContact);
        jsonRow[flagDepartmentContact] = DOM.getElementAttributeValueCurrent(textareaDepartmentContact);
        jsonRow[attrIdSupplierAddress] = DOM.getElementAttributeValueCurrent(tdAddress);
        jsonRow[flagSupplierAddress] = this.getSupplierAddressesFromRow(row);
        jsonRow[flagPhoneNumber] = DOM.getElementAttributeValueCurrent(textareaPhoneNumber);
        jsonRow[flagFax] = DOM.getElementAttributeValueCurrent(textareaFax);
        jsonRow[flagEmail] = DOM.getElementAttributeValueCurrent(textareaEmail);
        jsonRow[flagWebsite] = DOM.getElementAttributeValueCurrent(textareaWebsite);
        jsonRow[attrIdCurrency] = DOM.getElementAttributeValueCurrent(tdCurrency);
        jsonRow[flagActive] = DOM.getElementAttributeValueCurrent(checkboxActive);
        return jsonRow;
    }
    getSupplierAddressesFromRow(row) {
        let supplierAddresses = [];
        let trs = row.querySelectorAll('td.' + flagAddress + ' tr');
        let address, inputPostcode, inputAddressLine1, inputAddressLine2, inputCity, inputCounty, ddlRegion, inputActive;
        trs.forEach((tr) => {
            inputPostcode = tr.querySelector('td.' + flagPostcode + ' textarea');
            inputAddressLine1 = tr.querySelector('td.' + flagAddressLine1 + ' textarea');
            inputAddressLine2 = tr.querySelector('td.' + flagAddressLine2 + ' textarea');
            inputCity = tr.querySelector('td.' + flagCity + ' textarea');
            inputCounty = tr.querySelector('td.' + flagCounty + ' textarea');
            ddlRegion = tr.querySelector('td.' + flagRegion + ' select');
            inputActive = tr.querySelector('td.' + flagActive + ' input');
            address = {
                [attrIdSupplierAddress]: tr.getAttribute(attrIdSupplierAddress),
                [flagPostcode]: DOM.getElementAttributeValueCurrent(inputPostcode),
                [flagAddressLine1]: DOM.getElementAttributeValueCurrent(inputAddressLine1),
                [flagAddressLine2]: DOM.getElementAttributeValueCurrent(inputAddressLine2),
                [flagCity]: DOM.getElementAttributeValueCurrent(inputCity),
                [flagCounty]: DOM.getElementAttributeValueCurrent(inputCounty),
                [attrIdRegion]: DOM.getElementAttributeValueCurrent(ddlRegion),
                [flagActive]: DOM.getElementAttributeValueCurrent(inputActive),
            };
            supplierAddresses.push(address);
        });
        return supplierAddresses;
    }
    initialiseRowNew(row) {
        super.initialiseRowNew(row);
    }

    hookupTableMain() {
        super.hookupTableMain();
        this.hookupNameCompanyInputs();
        this.hookupNameContactInputs();
        this.hookupDepartmentContactInputs();
        this.hookupAddressFields();
        this.hookupPhoneNumberInputs();
        this.hookupFaxInputs();
        this.hookupEmailInputs();
        this.hookupWebsiteInputs();
        this.hookupCurrencyFields();
        this.hookupActiveCheckboxes();
    }
    hookupNameCompanyInputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagNameCompany + ' textarea');
    }
    hookupNameContactInputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagNameContact + ' textarea');
    }
    hookupDepartmentContactInputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagDepartmentContact + ' textarea');
    }

    hookupAddressFields() {
        this.hookupAddressPreviews();
        this.hookupAddressPostcodeInputs();
        this.hookupAddressLine1Inputs();
        this.hookupAddressLine2Inputs();
        this.hookupAddressCityInputs();
        this.hookupAddressCountyInputs();
        this.hookupAddressRegionDdls();
        this.hookupAddressActiveCheckboxes();
        this.hookupAddressDeleteButtons();
        this.hookupAddressUndeleteButtons();
        this.hookupAddressAddButtons();
    }
    hookupAddressPreviews() {
        this.hookupEventHandler("click", idTableMain + ' td.' + flagAddress, (event, td) => {
            if (!td.classList.contains(flagCollapsed)) return;
            this.handleClickAddressPreview(event, td);
        });
    }
    handleClickAddressPreview(event, element) {
        console.log("click address preview");
        this.toggleColumnHeaderCollapsed(flagAddress, false);
        element.classList.remove(flagCollapsed);
        let row = DOM.getRowFromElement(element);
        let idSupplier = row.getAttribute(attrIdSupplier);
        let supplierAddressList = idSupplier > 0 ? supplierAddresses[idSupplier] : [];
        let tblAddresses = document.createElement("table");
        tblAddresses.classList.add(flagAddress);
        let thead = document.createElement("thead");
        let tr = document.createElement("tr");
        let thPostcode = document.createElement("th");
        thPostcode.classList.add(flagPostcode);
        thPostcode.textContent = 'Postcode';
        let thAddressLine1 = document.createElement("th");
        thAddressLine1.classList.add(flagAddressLine1);
        thAddressLine1.textContent = 'Address Line 1';
        let thAddressLine2 = document.createElement("th");
        thAddressLine2.classList.add(flagAddressLine2);
        thAddressLine2.textContent = 'Address Line 2';
        let thCity = document.createElement("th");
        thCity.classList.add(flagCity);
        thCity.textContent = 'City';
        let thCounty = document.createElement("th");
        thCounty.classList.add(flagCounty);
        thCounty.textContent = 'County';
        let thRegion = document.createElement("th");
        thRegion.classList.add(flagRegion);
        thRegion.textContent = 'Region';
        let thActive = document.createElement("th");
        thActive.classList.add(flagActive);
        thActive.textContent = 'Active';
        let thAddDelete = document.createElement("th");
        thAddDelete.classList.add(flagAdd);
        let buttonAdd = document.createElement("button");
        buttonAdd.classList.add(flagAdd);
        buttonAdd.textContent = '+';
        thAddDelete.appendChild(buttonAdd);

        tr.appendChild(thPostcode);
        tr.appendChild(thAddressLine1);
        tr.appendChild(thAddressLine2);
        tr.appendChild(thCity);
        tr.appendChild(thCounty);
        tr.appendChild(thRegion);
        tr.appendChild(thActive);
        tr.appendChild(thAddDelete);
        thead.appendChild(tr);
        tblAddresses.appendChild(thead);

        let tbody = document.createElement("tbody");
        let regionOptions = Utils.getListFromDict(regions);
        supplierAddressList.forEach((supplierAddress, index) => {
            this.addRowSupplierAddress(tbody, supplierAddress, regionOptions);
        });
        tblAddresses.appendChild(tbody);
        
        let cell = DOM.getCellFromElement(element);
        let cellNew = cell.cloneNode(false);
        cellNew.appendChild(tblAddresses);
        row.replaceChild(cellNew, cell);
        console.log("tblAddresses: ", tblAddresses);
        this.hookupAddressFields();
    }
    addRowSupplierAddress(tbody, supplierAddress, regionOptions) {
        console.log("addRowSupplierAddress: ", supplierAddress);
        let tdPostcode = document.createElement("td");
        tdPostcode.classList.add(flagPostcode);
        let textareaPostcode = document.createElement("textarea");
        textareaPostcode.classList.add(flagPostcode);
        DOM.setElementValuesCurrentAndPrevious(textareaPostcode, supplierAddress[flagPostcode]);
        tdPostcode.appendChild(textareaPostcode);

        let tdAddressLine1 = document.createElement("td");
        tdAddressLine1.classList.add(flagAddressLine1);
        let textareaAddressLine1 = document.createElement("textarea");
        textareaAddressLine1.classList.add(flagAddressLine1);
        DOM.setElementValuesCurrentAndPrevious(textareaAddressLine1, supplierAddress[flagAddressLine1]);
        tdAddressLine1.appendChild(textareaAddressLine1);

        let tdAddressLine2 = document.createElement("td");
        tdAddressLine2.classList.add(flagAddressLine2);
        let textareaAddressLine2 = document.createElement("textarea");
        textareaAddressLine2.classList.add(flagAddressLine2);
        DOM.setElementValuesCurrentAndPrevious(textareaAddressLine2, supplierAddress[flagAddressLine2]);
        tdAddressLine2.appendChild(textareaAddressLine2);

        let tdCity = document.createElement("td");
        tdCity.classList.add(flagCity);
        let textareaCity = document.createElement("textarea");
        textareaCity.classList.add(flagCity);
        DOM.setElementValuesCurrentAndPrevious(textareaCity, supplierAddress[flagCity]);
        tdCity.appendChild(textareaCity);

        let tdCounty = document.createElement("td");
        tdCounty.classList.add(flagCounty);
        let textareaCounty = document.createElement("textarea");
        textareaCounty.classList.add(flagCounty);
        DOM.setElementValuesCurrentAndPrevious(textareaCounty, supplierAddress[flagCounty]);
        tdCounty.appendChild(textareaCounty);

        let region = supplierAddress[flagRegion];
        if (!region) region = {[attrIdRegion]: ''};
        let tdRegion = document.createElement("td");
        tdRegion.classList.add(flagRegion);
        DOM.setElementAttributesValuesCurrentAndPrevious(tdRegion, region[attrIdRegion]);
        let ddlRegion = document.createElement("select");
        ddlRegion.classList.add(flagRegion);
        let optionJson, option;
        regionOptions.forEach((regionOption) => {
            optionJson = BusinessObjects.getOptionJsonFromObjectJson(regionOption);
            option = DOM.createOption(optionJson);
            ddlRegion.appendChild(option);
        });
        DOM.setElementValuesCurrentAndPrevious(ddlRegion, region[attrIdRegion]);
        tdRegion.appendChild(ddlRegion);

        let tdActive = document.createElement("td");
        tdActive.classList.add(flagActive);
        let checkboxActive = document.createElement("input");
        checkboxActive.classList.add(flagActive);
        checkboxActive.type = 'checkbox';
        DOM.setElementValuesCurrentAndPrevious(checkboxActive, supplierAddress[flagActive]);
        tdActive.appendChild(checkboxActive);

        let tdDelete = document.createElement("td");
        tdDelete.classList.add(flagDelete);
        let buttonDelete = document.createElement("button");
        buttonDelete.classList.add(flagDelete);
        buttonDelete.textContent = 'x';
        tdDelete.appendChild(buttonDelete);

        let tr = document.createElement("tr");
        tr.setAttribute(attrIdSupplierAddress, supplierAddress[attrIdSupplierAddress]);
        tr.appendChild(tdPostcode);
        tr.appendChild(tdAddressLine1);
        tr.appendChild(tdAddressLine2);
        tr.appendChild(tdCity);
        tr.appendChild(tdCounty);
        tr.appendChild(tdRegion);
        tr.appendChild(tdActive);
        tr.appendChild(tdDelete);
        tbody.appendChild(tr);
    }
    hookupAddressPostcodeInputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagPostcode);
    }
    hookupAddressLine1Inputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagAddressLine1);
    }
    hookupAddressLine2Inputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagAddressLine2);
    }
    hookupAddressCityInputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagCity);
    }
    hookupAddressCountyInputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagCounty);
    }
    hookupAddressRegionDdls() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' select.' + flagRegion);
    }
    hookupAddressActiveCheckboxes() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' input.' + flagActive, (event, element) => {
            let rowSupplierAddress = element.closest('tr');
            let idAddress = rowSupplierAddress.getAttribute(attrIdSupplierAddress);
            DOM.setElementAttributeValueCurrent(rowSupplierAddress, idAddress);
            let rowSupplier = rowSupplierAddress.closest(idTableMain + ' > tbody > tr');
            let checkboxesActive = rowSupplier.querySelectorAll('td.' + flagAddress + ' input.' + flagActive);
            let isActive = element.checked;
            if (isActive) {
                checkboxesActive.forEach((checkbox) => {
                    if (checkbox == element) return;
                    DOM.setElementValueCurrent(checkbox, false);
                });
            }
            /*
            else if (checkboxesActive.length > 0) {
                DOM.setElementValueCurrent(checkboxesActive[0], false);
            }
            */
        });
    }
    hookupAddressDeleteButtons() {
        this.hookupEventHandler("click", idTableMain + ' td.' + flagAddress + ' button.' + flagDelete, (event, element) => {
            let row = DOM.getRowFromElement(element);
            row.classList.add(flagDelete);

            let buttonAdd = document.createElement("button");
            buttonAdd.classList.add(flagAdd);
            buttonAdd.textContent = '+';
            element.replaceWith(buttonAdd);
            this.hookupAddressUndeleteButtons();
        });
    }
    hookupAddressUndeleteButtons() {
        this.hookupEventHandler("click", idTableMain + ' td.' + flagAddress + ' td button.' + flagAdd, (event, element) => {
            let row = DOM.getRowFromElement(element);
            row.classList.remove(flagDelete);

            let buttonDelete = document.createElement("button");
            buttonDelete.classList.add(flagDelete);
            buttonDelete.textContent = 'x';
            element.replaceWith(buttonDelete);
            this.hookupAddressDeleteButtons();
        });
    }
    hookupAddressAddButtons() {
        this.hookupEventHandler("click", idTableMain + ' td.' + flagAddress + ' th button.' + flagAdd, (event, element) => {
            let row = element.closest(idTableMain + ' > tbody > tr');
            let idSupplier = row.getAttribute(attrIdSupplier);
            let hasActiveAddress = row.querySelectorAll('td.' + flagAddress + ' input.' + flagActive + ':checked').length > 0;
            let countSupplierAddresses = row.querySelectorAll('td.' + flagAddress + ' td.' + flagAddress).length;
            let supplierAddress = {
                [attrIdSupplier]: idSupplier,
                [attrIdSupplierAddress]: -1 - countSupplierAddresses,
                [flagPostcode]: '',
                [flagAddressLine1]: '',
                [flagAddressLine2]: '',
                [flagCity]: '',
                [flagCounty]: '',
                [attrIdRegion]: '',
                [flagActive]: !hasActiveAddress,
            };
            let tbody = row.querySelector('td.' + flagAddress + ' table tbody');
            this.addRowSupplierAddress(tbody, supplierAddress, Utils.getListFromDict(regions));
            if (!hasActiveAddress) {
                let tdAddress = row.querySelector('td.' + flagAddress);
                // tdAddress.setAttribute(attrIdSupplierAddress, supplierAddress[attrIdSupplierAddress]);
                DOM.setElementAttributeValueCurrent(tdAddress, supplierAddress[attrIdSupplierAddress]);
            }
            this.hookupAddressFields();
        });
    }

    hookupPhoneNumberInputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagPhoneNumber + ' textarea');
    }
    hookupFaxInputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagFax + ' textarea');
    }
    hookupEmailInputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagEmail + ' textarea');
    }
    hookupWebsiteInputs() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagWebsite + ' textarea');
    }
    hookupActiveCheckboxes(){
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagActive + ' input');
    }

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