import template from "./Tabs.html";
  import style from "antd/lib/tabs/style/index.css";

  angular.module("esNgAntd").directive("antdTabs", ["esNgAntd", function (esNgAntd) {
    return {
      template: template,
      restrict: "E",
      replace: true,
      transclude: true,
      scope: {
        defaultActiveKey: "@",
        onChange: "&"
      },
      controller: function ($scope, $element) {
        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) {
        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);
        }
      }
    };
  }]);