var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
define(["require", "exports", "jquery", "./util"], function (require, exports, jquery_1, util_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    jquery_1 = __importDefault(jquery_1);
    function makeDropdownHtml(props) {
        let html = '';
        html += props.canEmpty ? '<option value=""></option>' : '';
        html += props.from.map((fromItem) => {
            var _a;
            const items = Array.prototype.slice.call((_a = document.querySelector(fromItem.containerSelector)) === null || _a === void 0 ? void 0 : _a.querySelectorAll(fromItem.elementSelector));
            return items
                .map((element, index) => {
                const text = ['input', 'select'].includes(element.tagName.toLowerCase()) ? element.value : element.innerHTML;
                return `<option value='${index + 1}'>${text}</option>`;
            })
                .join('');
        }).join('');
        return html;
    }
    function updateDropdownValue(node, html, options) {
        node.forEach((element) => {
            const oldValue = Number(element.value);
            let newValue = oldValue;
            element.innerHTML = html;
            if (options) {
                if (options.newNum && options.oldNum === oldValue) {
                    newValue = options.newNum;
                }
                else if (options.newNum && options.newNum === oldValue) {
                    newValue = options.oldNum || null;
                }
                else if (options.oldNum && !options.newNum) {
                    if (options.oldNum === oldValue) {
                        newValue = null;
                    }
                    else if (options.oldNum < oldValue) {
                        newValue = oldValue - 1;
                    }
                }
            }
            element.value = (newValue || '') + '';
        });
    }
    function updateDropdowns(props, options) {
        const dropdown = document.querySelectorAll(props.toElementSelector);
        const dropdownHtml = makeDropdownHtml(props);
        updateDropdownValue(dropdown, dropdownHtml, options);
        (0, util_1.updateTemplate)(props.toTemplateSelector, (html) => {
            html.find(props.toElementSelector).html(dropdownHtml);
        });
    }
    function TableDependSelect(props) {
        if (props.canEmpty == null) {
            props.canEmpty = false;
        }
        props.from.forEach((fromItem) => {
            const container = document.querySelector(fromItem.containerSelector);
            if (container) {
                const event = ((event) => {
                    updateDropdowns(props, event.detail);
                });
                container.addEventListener('add.md.table', event);
                container.addEventListener('reorder.md.table', event);
                container.addEventListener('delete.md.table', event);
            }
            (0, jquery_1.default)(fromItem.containerSelector).on('change', fromItem.elementSelector, (ev) => {
                const index = (0, jquery_1.default)(ev.currentTarget.closest('[data-row]')).index();
                updateDropdowns(props, {
                    oldNum: index,
                    newNum: index
                });
            });
        });
    }
    exports.default = TableDependSelect;
});
