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;
        }
      }
    };
  });