import _extends from "@babel/runtime/helpers/esm/extends";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
var _class, _Tab;
import React from 'react';
import invariant from 'invariant';
import { globalObject } from '@skbkontur/global-object';
import { ResizeDetector } from "../../../internal/ResizeDetector";
import { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from "../../../lib/events/keyboard/identifiers";
import { keyListener } from "../../../lib/events/keyListener";
import { isFunctionalComponent } from "../../../lib/utils";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { CommonWrapper } from "../../../internal/CommonWrapper";
import { cx } from "../../../lib/theming/Emotion";
import { rootNode } from "../../../lib/rootNode";
import { createPropsGetter } from "../../../lib/createPropsGetter";
import { getVisualStateDataAttributes } from "../../../internal/CommonWrapper/utils/getVisualStateDataAttributes";
import { TabsContext, TabsContextDefaultValue } from "../TabsContext";
import { globalClasses, horizontalStyles, styles, verticalStyles } from "../Tab.styles";
export var TabDataTids = {
  root: 'Tab__root'
};

/**
 * Вложенный элемент компонента Tabs.
 */
export var Tab = rootNode(_class = (_Tab = /*#__PURE__*/function (_React$Component) {
  function Tab(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    _this.context = _this.context;
    _this.getProps = createPropsGetter(Tab.defaultProps);
    _this.state = {
      focusedByKeyboard: false
    };
    _this.tabComponent = null;
    _this.getUnderlyingNode = function () {
      return _this.tabComponent;
    };
    _this.getId = function () {
      return _this.props.id || _this.getProps().href;
    };
    _this.refTabComponent = function (instance) {
      _this.tabComponent = instance;
    };
    _this.getTabInstance = function () {
      return _this;
    };
    _this.switchTab = function (event) {
      if (_this.props.disabled) {
        event.preventDefault();
        return;
      }
      var _this$getProps = _this.getProps(),
        href = _this$getProps.href,
        component = _this$getProps.component;
      var id = _this.props.id || href;
      if (_this.props.onClick) {
        _this.props.onClick(event);
        if (event.defaultPrevented) {
          return;
        }
      }
      if (typeof id === 'string') {
        _this.context.switchTab(id);
      }
      if (component === 'a' && !href) {
        event.preventDefault();
      }
    };
    _this.handleKeyDown = function (e) {
      if (_this.props.disabled) {
        return;
      }
      if (_this.props.onKeyDown) {
        _this.props.onKeyDown(e);
        if (e.defaultPrevented) {
          return;
        }
      }
      var id = _this.getId();
      if (typeof id !== 'string') {
        return;
      }
      if (!isKeyArrow(e)) {
        return;
      }
      e.preventDefault();
      var delta = isKeyArrowLeft(e) || isKeyArrowUp(e) ? -1 : 1;
      _this.context.shiftFocus(id, delta);
    };
    _this.handleFocus = function () {
      if (_this.props.disabled) {
        return;
      }

      // focus event fires before keyDown eventlistener
      // so we should check focusKeyPressed in async way
      globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
        if (keyListener.isTabPressed || keyListener.isArrowPressed) {
          _this.setState({
            focusedByKeyboard: true
          });
        }
      });
    };
    _this.handleBlur = function () {
      if (_this.props.disabled) {
        return;
      }
      _this.setState({
        focusedByKeyboard: false
      });
    };
    invariant(_this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');
    return _this;
  }
  _inheritsLoose(Tab, _React$Component);
  var _proto = Tab.prototype;
  _proto.componentDidMount = function componentDidMount() {
    var id = this.getId();
    if (typeof id === 'string') {
      this.context.addTab(id, this.getTabInstance);
    }
  };
  _proto.componentDidUpdate = function componentDidUpdate() {
    if (this.context.activeTab === this.props.id) {
      this.context.notifyUpdate();
    }
  };
  _proto.componentWillUnmount = function componentWillUnmount() {
    var id = this.getId();
    if (typeof id === 'string') {
      this.context.removeTab(id);
    }
  };
  _proto.render = function render() {
    var _this2 = this;
    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
      _this2.theme = theme;
      return _this2.renderMain();
    });
  };
  _proto.getIndicators = function getIndicators() {
    return {
      error: Boolean(this.props.error),
      warning: Boolean(this.props.warning),
      success: Boolean(this.props.success),
      primary: Boolean(this.props.primary),
      disabled: Boolean(this.props.disabled)
    };
  };
  _proto.renderMain = function renderMain() {
    var _cx, _cx2;
    var _this$props = this.props,
      children = _this$props.children,
      disabled = _this$props.disabled,
      error = _this$props.error,
      warning = _this$props.warning,
      success = _this$props.success,
      primary = _this$props.primary,
      ariaDescribedby = _this$props['aria-describedby'],
      ariaLabel = _this$props['aria-label'];
    var _this$getProps2 = this.getProps(),
      Component = _this$getProps2.component,
      href = _this$getProps2.href;
    var isActive = false;
    var isVertical = false;
    var id = this.getId();
    if (typeof id === 'string') {
      isActive = this.context.activeTab === this.getId();
      isVertical = this.context.vertical;
    }
    var orientationStyles = isVertical ? verticalStyles : horizontalStyles;
    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
      rootNodeRef: this.setRootNode
    }, getVisualStateDataAttributes({
      active: isActive,
      disabled: disabled
    }), this.props), /*#__PURE__*/React.createElement(Component, {
      "data-tid": TabDataTids.root,
      className: cx((_cx = {}, _cx[styles.rootSmall(this.theme)] = this.context.size === 'small', _cx[styles.rootMedium(this.theme)] = this.context.size === 'medium', _cx[styles.rootLarge(this.theme)] = this.context.size === 'large', _cx[styles.verticalSmall(this.theme)] = !!isVertical && this.context.size === 'small', _cx[styles.verticalMedium(this.theme)] = !!isVertical && this.context.size === 'medium', _cx[styles.verticalLarge(this.theme)] = !!isVertical && this.context.size === 'large', _cx[orientationStyles.primary(this.theme)] = !!primary, _cx[orientationStyles.success(this.theme)] = !!success, _cx[orientationStyles.warning(this.theme)] = !!warning, _cx[orientationStyles.error(this.theme)] = !!error, _cx[styles.active()] = !!isActive, _cx[orientationStyles.active(this.theme)] = !!isActive, _cx[styles.disabled(this.theme)] = !!disabled, _cx[orientationStyles.disabled()] = !!disabled, _cx)),
      onBlur: this.handleBlur,
      onClick: this.switchTab,
      onFocus: this.handleFocus,
      onKeyDown: this.handleKeyDown,
      tabIndex: disabled ? -1 : 0,
      ref: isFunctionalComponent(Component) ? null : this.refTabComponent,
      href: href,
      "aria-describedby": ariaDescribedby,
      "aria-label": ariaLabel
    }, /*#__PURE__*/React.createElement(ResizeDetector, {
      onResize: this.context.notifyUpdate
    }, children), this.state.focusedByKeyboard && /*#__PURE__*/React.createElement("div", {
      className: cx(globalClasses.focus, (_cx2 = {}, _cx2[styles.focusSmall(this.theme)] = this.context.size === 'small', _cx2[styles.focusMedium(this.theme)] = this.context.size === 'medium', _cx2[styles.focusLarge(this.theme)] = this.context.size === 'large', _cx2))
    })));
  };
  return Tab;
}(React.Component), _Tab.__KONTUR_REACT_UI__ = 'Tab', _Tab.displayName = 'Tab', _Tab.contextType = TabsContext, _Tab.defaultProps = {
  component: 'a',
  href: ''
}, _Tab)) || _class;