"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Tabs = void 0;

var _preact = require("preact");

var _classnames = _interopRequireDefault(require("classnames"));

var _icon = require("./icon");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

class Tabs extends _preact.Component {
  constructor(props) {
    super(props);

    this.handleResize = () => this.measureActive();
  }

  measureActive() {
    const {
      vertical,
      padding = 4
    } = this.props;
    const activeEl = this.base ? this.base.querySelector('[data-active]') : null;

    if (activeEl) {
      const bg = this.base.querySelector('.bg');
      const left = activeEl.offsetLeft;
      const height = activeEl.offsetHeight;
      const width = activeEl.offsetWidth;
      const top = activeEl.offsetTop;
      bg.style = "transform: translateX(".concat((vertical ? 0 : left) + padding, "px) translateY(").concat(top + padding, "px); width: ").concat((vertical ? this.base.offsetWidth : width) - padding * 2, "px; height: ").concat(height - padding * 2, "px"); // debugger
    }
  }

  componentDidUpdate() {
    this.measureActive();
  }

  componentDidMount() {
    this.measureActive();
    window.addEventListener('resize', this.handleResize, {
      passive: true
    });
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize, {
      passive: true
    });
  }

  render() {
    const {
      tabs,
      updateSelectedTab,
      className,
      vertical,
      activeClasses = 'bg-lightest-blue',
      tabTextCenter,
      style
    } = this.props;
    return (0, _preact.h)("nav", {
      className: (0, _classnames.default)('br2 relative', {
        'flex items-center flex-wrap': !vertical
      }, className),
      style: style
    }, (0, _preact.h)("div", {
      key: "same",
      className: (0, _classnames.default)('bg absolute top-0 left-0 transition-all br2 bg w-auto', activeClasses)
    }), tabs.map(({
      label,
      name,
      active,
      icon,
      iconColor = 'black',
      textColor = 'black'
    }) => (0, _preact.h)("div", {
      className: "relative",
      "data-active": active,
      key: name
    }, (0, _preact.h)("a", {
      "data-e2e": "tab".concat(name),
      className: (0, _classnames.default)('flex no-underline items-center pa3 hover-blue', textColor, {
        underline: !active,
        'no-underline': active,
        'w-100 db': vertical,
        'justify-center': tabTextCenter
      }),
      href: "#",
      onClick: e => {
        e.preventDefault();
        updateSelectedTab(name);
      }
    }, icon && (0, _preact.h)(_icon.Icon, {
      size: "20",
      className: (0, _classnames.default)('mr2', iconColor),
      icon: icon
    }), (0, _preact.h)("span", {
      className: (0, _classnames.default)(!active && 'underline')
    }, label)))));
  }

}

exports.Tabs = Tabs;