import template from "./Tabs.html";
  import style from "antd/lib/tabs/style/index.css";
  
  class Tabs {
      useModules = ["esNgAntd"];
  

      context = true;

  
      state = {
          childrens: [],
          labels: [],
          tabWidth: 0,
          offsetLeft: 0,
          activeKey: this.props.defaultActiveKey,
      };
  

      constructor($element) {

          esNgAntd.createStyle("ant-tabs", style);
          if (this.props.defaultActiveKey) {
              setTimeout(() => {

                  if ($element[0].querySelector(".ant-tabs-tab-active")) {

                      this.state.tabWidth = $element[0].querySelector(
                          ".ant-tabs-tab-active"
                      ).clientWidth;
                      this.$apply();
                  }
              }, 0);
          }
      }
  
      handleClick(labelKey, tabKey, event) {
          let target = event.target;
          this.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) {

              this.state.offsetLeft =
                  beforeTarget
                      .map(function (item) {
                          return (
                              item.clientWidth +
                              parseFloat(getComputedStyle(item, null).marginLeft)
                          );
                      })
                      .reduce(function (prev, curr) {
                          return prev + curr;
                      }) + currentMarginLeft;

          } else {
              this.state.offsetLeft = 0;
          }
          this.state.activeKey = labelKey;
          this.state.childrens.forEach(function (element) {
              element.state.activeKey = labelKey;
          });
          this.props.onChange({
              key: labelKey,
          });
      }

  
      render() {
          return template;
      }

  }

  
  Tabs.propTypes = {
      defaultActiveKey: PropTypes.string,
      onChange: PropTypes.function,
  };