import template from "./TabPane.html";
angular.module("esNgAntd").directive("esTabPane", function () {
    return {
        controllerAs: "esTabPane",
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {
            key: "@",
            tab: "@",
        },
        template: template,
        controller: function ($scope, $element) {
            this.getContext = function () {
                return $scope;
            };

            $scope.state = {
                activeKey: null,
                key: $scope.key,
            };
            $scope.watch = {
                tab: function (newVal, oldVal) {
                    if (newVal !== oldVal) {
                        let item = $scope.esTabs.state.labels.find(function (
                            item
                        ) {
                            return item.key === $scope.key;
                        });

                        if (item) {
                            item.name = newVal;
                        }
                    }
                },
            };

            for (const key in $scope.watch) {
                $scope.$watch(key, $scope.watch[key], true);
            }
        },
        require: ["?^esTabs"],
        link: function ($scope, $element, $attrs, $controllers, $transclude) {
            let [esTabs] = $controllers;
            $scope.esTabs = esTabs.getContext();
            $scope.esTabs.state.labels.push({
                name: $scope.tab,
                key: $scope.key,
            });
            $scope.esTabs.state.childrens.push($scope);
            $scope.state.activeKey = $scope.esTabs.state.activeKey;
        },
    };
});