import template from "./Tabs.html";
import style from "antd/lib/tabs/style/index.css";

class Tabs {
    useModules = ["esNgAntd"];

    props = { defaultActiveKey: Number, onChange: Function };

    state = {
        childrens: [],
        labels: [],
        tabWidth: 0,
        offsetLeft: 0,
        activeKey: this.props.defaultActiveKey,
    };

    template = template;

    constructor() {
        esNgAntd.createStyle("ant-tabs", style);
        if (this.props.defaultActiveKey) {
            setTimeout(() => {
                if ($element[0].querySelector(
                    ".ant-tabs-tab-active"
                )) {
                    this.state.tabWidth = $element[0].querySelector(
                        ".ant-tabs-tab-active"
                    ).clientWidth;
                    this.$apply();
                }
            }, 0);
        }
    }

    handleClick(labelKey, tabKey, event) {
        let target = event.target;
        this.state.tabWidth = target.clientWidth;
        let currentMarginLeft = parseFloat(getComputedStyle(target, null).marginLeft);
        let beforeTarget = Array.prototype.slice
            .call(target.parentNode.querySelectorAll("div"))
            .splice(0, tabKey);
        if (beforeTarget.length > 0) {
            this.state.offsetLeft = beforeTarget
                .map(function (item) {
                    return (
                        item.clientWidth +
                        parseFloat(getComputedStyle(item, null).marginLeft)
                    );
                })
                .reduce(function (prev, curr) {
                    return prev + curr;
                }) + currentMarginLeft;
        } else {
            this.state.offsetLeft = 0;
        }
        this.state.activeKey = labelKey;
        this.state.childrens.forEach(function (element) {
            element.state.activeKey = labelKey;
        });
        this.props.onChange({
            key: labelKey,
        });
    }
}