import template from "./Tabs.html";
import style from "antd/lib/tabs/style/index.css";
angular.module("esNgAntd").directive("antdTabs", function (esNgAntd) {
    return {
        controllerAs: "antdTabs",
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {
            defaultActiveKey: "@",
            onChange: "&",
        },
        template: template,
        controller: function ($scope, $element, $attrs) {
            this.getContext = function () {
                return $scope;
            };

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

            $scope.handleClick = function (labelKey, tabKey, event) {
                let target = event.target;
                $scope.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) {
                    $scope.state.offsetLeft =
                        beforeTarget
                            .map(function (item) {
                                return (
                                    item.clientWidth +
                                    parseFloat(
                                        getComputedStyle(item, null).marginLeft
                                    )
                                );
                            })
                            .reduce(function (prev, curr) {
                                return prev + curr;
                            }) + currentMarginLeft;
                } else {
                    $scope.state.offsetLeft = 0;
                }

                $scope.state.activeKey = labelKey;
                $scope.state.childrens.forEach(function (element) {
                    element.state.activeKey = labelKey;
                });
                $scope.onChange({
                    key: labelKey,
                });
            };
        },
        link: function ($scope, $element, $attrs, $controllers, $transclude) {
            esNgAntd.createStyle("ant-tabs", style);

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