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

class Tabs {
    useModules = ["esNgAntd"];

    context = true;

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

    constructor($element) {
        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,
        });
    }

    render() {
        return template;
    }
}

Tabs.propTypes = {
    defaultActiveKey: PropTypes.string,
    onChange: PropTypes.function,
};