import _extends from "@babel/runtime/helpers/esm/extends";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
var _class, _Tabs;
import React from 'react';
import { globalObject } from '@skbkontur/global-object';
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { CommonWrapper } from "../../../internal/CommonWrapper";
import { cx } from "../../../lib/theming/Emotion";
import { getRootNode } from "../../../lib/rootNode/getRootNode";
import { rootNode } from "../../../lib/rootNode";
import { createPropsGetter } from "../../../lib/createPropsGetter";
import { isInstanceOf } from "../../../lib/isInstanceOf";
import { Indicator } from "../Indicator";
import { styles } from "../Tabs.styles";
import { TabsContext } from "../TabsContext";
import { Tab } from "../Tab";
export var TabsDataTids = {
  root: 'Tabs__root',
  indicatorRoot: 'Indicator__root'
};

/**
 * Родитель компонента Tab. Связывает `Tab`'ы в группу и позволяет управлять их состоянием, помогают в навигации.
 *
 * Используйте `Tabs` для второстепенной навигации, для группировки или фильтрации контента.
 *
 * Не используйте `Tabs` для основной навигации. Для этого лучше подходит главное меню на цветной плашке — оно более заметно на странице.
 * Не используйте `Tabs` для переключения состояний — для этого есть RadioGroup, Toggle и Switcher.
 */
export var Tabs = rootNode(_class = (_Tabs = /*#__PURE__*/function (_React$Component) {
  function Tabs() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.getProps = createPropsGetter(Tabs.defaultProps);
    _this.tabs = [];
    _this.tabUpdates = {
      on: function on(cb) {
        var index = _this.listeners.push(cb);
        return function () {
          _this.listeners.splice(index, 1);
        };
      }
    };
    _this.listeners = [];
    _this.shiftFocus = function (fromTab, delta) {
      var _this2 = _this,
        tabs = _this2.tabs;
      var index = tabs.findIndex(function (x) {
        return x.id === fromTab;
      });
      var newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));
      var tab = tabs[newIndex];
      var tabNode = tab.getNode();
      var htmlNode = getRootNode(tabNode);
      if (isInstanceOf(htmlNode, globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {
        htmlNode.focus();
      }
    };
    _this.notifyUpdate = function () {
      _this.listeners.forEach(function (cb) {
        return cb();
      });
    };
    _this.switchTab = function (id) {
      var _this$props = _this.props,
        onValueChange = _this$props.onValueChange,
        value = _this$props.value;
      if (id !== value && onValueChange) {
        onValueChange(id);
      }
    };
    _this.getTab = function (id) {
      var _ref = _this.tabs.find(function (x) {
          return x.id === id;
        }) || {},
        _ref$getNode = _ref.getNode,
        getNode = _ref$getNode === void 0 ? null : _ref$getNode;
      return getNode && getNode();
    };
    _this.addTab = function (id, getNode) {
      _this.tabs = _this.tabs.concat({
        id: id,
        getNode: getNode
      });
    };
    _this.removeTab = function (id) {
      _this.tabs = _this.tabs.filter(function (tab) {
        return tab.id !== id;
      });
    };
    return _this;
  }
  _inheritsLoose(Tabs, _React$Component);
  var _proto = Tabs.prototype;
  _proto.render = function render() {
    var _this3 = this;
    var _this$props2 = this.props,
      value = _this$props2.value,
      width = _this$props2.width,
      children = _this$props2.children,
      indicatorClassName = _this$props2.indicatorClassName,
      ariaDescribedby = _this$props2['aria-describedby'];
    var _this$getProps = this.getProps(),
      vertical = _this$getProps.vertical,
      size = _this$getProps.size;
    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
      var _cx;
      _this3.theme = theme;
      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
        rootNodeRef: _this3.setRootNode
      }, _this3.props), /*#__PURE__*/React.createElement("div", {
        "data-tid": TabsDataTids.root,
        className: cx((_cx = {}, _cx[styles.rootSmall(_this3.theme)] = size === 'small', _cx[styles.rootMedium(_this3.theme)] = size === 'medium', _cx[styles.rootLarge(_this3.theme)] = size === 'large', _cx[styles.vertical()] = vertical, _cx)),
        style: {
          width: width
        },
        "aria-describedby": ariaDescribedby
      }, /*#__PURE__*/React.createElement(TabsContext.Provider, {
        value: {
          vertical: vertical,
          activeTab: value,
          size: size,
          getTab: _this3.getTab,
          addTab: _this3.addTab,
          removeTab: _this3.removeTab,
          notifyUpdate: _this3.notifyUpdate,
          shiftFocus: _this3.shiftFocus,
          switchTab: _this3.switchTab
        }
      }, children, /*#__PURE__*/React.createElement(Indicator, {
        className: indicatorClassName,
        tabUpdates: _this3.tabUpdates,
        vertical: _this3.getProps().vertical
      }))));
    });
  };
  return Tabs;
}(React.Component), _Tabs.__KONTUR_REACT_UI__ = 'Tabs', _Tabs.displayName = 'Tabs', _Tabs.defaultProps = {
  vertical: false,
  size: 'large'
}, _Tabs.Tab = Tab, _Tabs)) || _class;