import template from "./TabPane.html";

  angular.module("esNgAntd").directive("antdTabPane", function () {

      return {

          controllerAs: "antdTabPane",

          restrict: "E",
          transclude: true,
          replace: true,
          scope: {
              key: "@",
              tab: "@",
          },
          template: template,

          controller: function ($scope, $element, $attrs) {

              this.getContext = function () {
                  return $scope;
              };
  
              $scope.state = {
                  activeKey: null,
                  key: $scope.key,
              };
              $scope.watch = {
                  tab: function (newVal, oldVal) {
                      if (newVal !== oldVal) {

                          let item = $scope.antdTabs.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: ["?^antdTabs"],

          link: function ($scope, $element, $attrs, $controllers, $transclude) {

              let [antdTabs] = $controllers;
              $scope.antdTabs = antdTabs.getContext();
              $scope.antdTabs.state.labels.push({

                  name: $scope.tab,
                  key: $scope.key,
              });

              $scope.antdTabs.state.childrens.push($scope);
              $scope.state.activeKey = $scope.antdTabs.state.activeKey;

          },
      };
  });