var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
define(["require", "exports", "./TableDependOne", "./index"], function (require, exports, TableDependOne_1, index_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    TableDependOne_1 = __importDefault(TableDependOne_1);
    class TableOneVisible {
        static isInit(el) {
            return el.getAttribute('data-one-visible') == '1';
        }
        static create(props) {
            return new TableOneVisible(props);
        }
        constructor(props) {
            var _a;
            this.props = props;
            this.dropdown = new Dropdown({
                active: 0,
                list: [],
                onChange: (index) => this.changeTab(index)
            });
            this.calcList();
            this.init();
            (_a = props.depends) === null || _a === void 0 ? void 0 : _a.forEach((item) => {
                TableDependOne_1.default.create(item);
            });
        }
        init() {
            this.props.container.setAttribute('data-one-visible', '1');
            this.props.container.before(this.dropdown.render());
            this.changeTab(0);
            this.props.container.addEventListener('add.md.table', () => this.afterAddEvent());
            this.props.container.addEventListener('delete.md.table', () => this.afterDeleteEvent());
            this.props.container.addEventListener('filterOneVisible.md.table', (ev) => this.filterEvent(ev));
        }
        calcList() {
            //find all row
            this.children = Array.from(this.props.container.querySelectorAll('[data-md-table-row]'));
            if (this.props.filter) {
                //find children with filter
                const newChildren = this.children.filter(this.props.filter);
                //find and hide children not in filter
                this.children
                    .filter((item) => !newChildren.includes(item))
                    .forEach((child) => {
                    child.style.display = 'none';
                });
                //set new children
                this.children = newChildren;
            }
            this.dropdown.setList(this.getArrayTab());
        }
        afterAddEvent() {
            this.calcList();
            const nextTab = this.getTotalItem() - 1; //last
            this.dropdown.setActive(nextTab);
            this.changeTab(nextTab);
        }
        afterDeleteEvent() {
            this.calcList();
            const nextTab = 0; //this.getTotalItem() > 0 ? 0 : -1;//first or empty
            this.dropdown.setActive(nextTab);
            this.changeTab(nextTab);
            //need if it has depends (invisible item)
            const totalItem = this.getTotalItem();
            (0, index_1.toggleEmptyState)(this.props.container, totalItem === 0);
        }
        filterEvent(ev) {
            this.props.filter = ev.detail.filter;
            this.calcList();
            this.afterDeleteEvent();
            const totalItem = this.getTotalItem();
            (0, index_1.toggleEmptyState)(this.props.container, totalItem === 0);
        }
        changeTab(index) {
            let rowNum;
            this.children.forEach((child, childIndex) => {
                var _a;
                child.style.display = index == childIndex ? '' : 'none';
                if (index == childIndex) {
                    rowNum = Number((_a = child.querySelector('[data-md-table-row-num]')) === null || _a === void 0 ? void 0 : _a.innerHTML);
                }
            });
            setTimeout(() => {
                this.props.container.dispatchEvent(new CustomEvent('oneVisible.md.table', {
                    detail: {
                        rowNum
                    }
                }));
            }, 0);
            const totalItem = this.getTotalItem();
            this.props.container.classList.toggle('border-top-0', totalItem !== 0);
            this.props.container.classList.toggle('rounded-top-0', totalItem !== 0);
        }
        getTotalItem() {
            return this.children.length;
        }
        getArrayTab() {
            const total = this.getTotalItem();
            const hasFormat = this.props.name.includes('{current}');
            return [...Array(total).keys()].map(i => hasFormat ?
                this.props.name.replace('{current}', i + 1 + '').replace('{total}', total + '') :
                `${this.props.name} ${i + 1}`);
        }
    }
    exports.default = TableOneVisible;
    class Dropdown {
        constructor(props) {
            this.props = props;
            this.make();
            this.renderData();
        }
        make() {
            this.dropdown = document.createElement('ul');
            this.dropdown.classList.add('nav', 'nav-tabs', 'nav-tabs-highlight', 'mb-0');
            const tabItem = document.createElement('li');
            tabItem.classList.add('nav-item', 'dropdown');
            this.dropdown.append(tabItem);
            this.dropdownCurrent = document.createElement('a');
            this.dropdownCurrent.classList.add('nav-link', 'active', 'dropdown-toggle');
            this.dropdownCurrent.setAttribute('href', '#');
            this.dropdownCurrent.setAttribute('data-bs-toggle', 'dropdown');
            tabItem.append(this.dropdownCurrent);
            this.dropdownList = document.createElement('div');
            this.dropdownList.classList.add('dropdown-menu', 'dropdown-menu-right');
            this.dropdownList.setAttribute('x-placement', 'bottom-end');
            tabItem.append(this.dropdownList);
        }
        handleClick(ev, index) {
            ev.preventDefault();
            this.props.onChange && this.props.onChange(index);
            this.setActive(index);
        }
        setActive(index) {
            this.props.active = index;
            this.renderData();
        }
        setList(list) {
            if (this.props.list.length > 0) {
                Array.from(this.dropdownList.children)
                    .forEach((child, index) => child.removeEventListener('click', (ev) => this.handleClick(ev, index)));
            }
            this.props.list = list;
            this.renderData();
        }
        renderData() {
            this.dropdownCurrent.innerHTML = this.props.list[this.props.active];
            this.dropdown.classList.toggle('d-none', this.props.list.length === 0);
            this.dropdownList.innerHTML = '';
            this.props.list.forEach((item, index) => {
                const dropdownItem = document.createElement('a');
                dropdownItem.setAttribute('href', '#');
                dropdownItem.classList.add('dropdown-item');
                if (index === this.props.active) {
                    dropdownItem.classList.add('active');
                }
                dropdownItem.innerHTML = item;
                dropdownItem.addEventListener('click', (ev) => this.handleClick(ev, index));
                this.dropdownList.append(dropdownItem);
            });
        }
        render() {
            return this.dropdown;
        }
    }
});
