import template from "./TabPane.html";
angular.module("esNgAntd").directive("antdTabPane", function () {
  return {
    template: template,
    restrict: "E",
    replace: true,
    transclude: true,
    scope: {
      key: "@",
      tab: "@"
    },
    require: ["^antdTabs"],
    controller: function ($scope, $element, $attrs) {
      $scope.watch = {
        tab: function (newVal) {
          if (newVal) {
            let item = $scope.antdTabs.state.labels.find(function (item) {
              return item.key === $scope.key;
            });

            if (item) {
              item.name = newVal;
            }
          }
        }
      };
      $scope.state = {
        activeKey: null,
        key: $scope.key
      };
    },
    link: function ($scope, $element, $attrs, $controllers) {
      for (const key in $scope.watch) {
        $scope.$watch(key, $scope.watch[key], true);
      }

      let [antdTabs] = $controllers;

      if (antdTabs) {
        $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;
      }
    }
  };
});