'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var index$1 = require('../../../../../utils/index.js');
var tokens = require('../../../tokens.js');
var TabsContext = require('../../../TabsContext.js');
var IconDisclosureLeft = require('../../../../_Icon/Icons/IconDisclosureLeft.js');
var IconDisclosureRight = require('../../../../_Icon/Icons/IconDisclosureRight.js');
var index = require('../../../utils/index.js');
var VerticalTabs_styles = require('./VerticalTabs.styles.js');
var base = require('./variations/_size/base.js');
var base$1 = require('./variations/_view/base.js');
var base$2 = require('./variations/_disabled/base.js');
var react = require('../../../../../utils/react.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var _IconDisclosureLeft, _IconDisclosureRight;
var _excluded = ["id", "disabled", "clip", "size", "view", "children", "index", "className", "orientation", "hasDivider"];
var Keys = /*#__PURE__*/function (Keys) {
  Keys[Keys["end"] = 35] = "end";
  Keys[Keys["home"] = 36] = "home";
  Keys[Keys["up"] = 38] = "up";
  Keys[Keys["down"] = 40] = "down";
  return Keys;
}(Keys || {}); // TODO: https://github.com/salute-developers/plasma/issues/1474
var verticalTabsRoot = function verticalTabsRoot(Root) {
  return /*#__PURE__*/React.forwardRef(function (props, outerRef) {
    var id = props.id,
      _props$disabled = props.disabled,
      disabled = _props$disabled === void 0 ? false : _props$disabled,
      _props$clip = props.clip,
      clip = _props$clip === void 0 ? 'showAll' : _props$clip,
      size = props.size,
      view = props.view,
      children = props.children,
      index$2 = props.index,
      className = props.className,
      orientation = props.orientation,
      _props$hasDivider = props.hasDivider,
      hasDivider = _props$hasDivider === void 0 ? true : _props$hasDivider,
      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
    var _useState = React.useState(true),
      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
      firstItemVisible = _useState2[0],
      setFirstItemVisible = _useState2[1];
    var _useState3 = React.useState(false),
      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
      lastItemVisible = _useState4[0],
      setLastItemVisible = _useState4[1];

    // Триггер доп. скролла при появлении левой стрелки, которая отъедает ширину scroll-контейнера
    var _useState5 = React.useState(false),
      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
      shouldTriggerAdditionalScroll = _useState6[0],
      setShouldTriggerAdditionalScroll = _useState6[1];
    var refs = React.useMemo(function () {
      return new TabsContext.TabItemRefs(index$2);
    }, []);
    var uniqId = react.safeUseId();
    var tabsId = id || uniqId;
    var noDividerClass = !hasDivider ? tokens.classes.tabsNoDivider : undefined;
    var hasTopArrowClass = !firstItemVisible ? tokens.classes.tabsHasTopArrow : undefined;
    var hasBottomArrowClass = !lastItemVisible ? tokens.classes.tabsHasBottomArrow : undefined;
    var clipScrollClass = clip === 'scroll' ? tokens.classes.tabsClipScroll : undefined;
    var clipShowAllClass = clip === 'showAll' ? tokens.classes.tabsClipShowAll : undefined;
    var scrollRef = React.useRef(null);
    var trackRef = React.useRef(null);
    var upArrowRef = React.useRef(null);
    var onPrev = React.useCallback(function () {
      if (disabled || !scrollRef.current) {
        return;
      }
      var scrollTop = scrollRef.current.scrollTop;
      var firstOverflowingTab = index.getFirstOverflowingTab(refs.items.slice().reverse(), scrollTop, orientation);
      if (!(firstOverflowingTab !== null && firstOverflowingTab !== void 0 && firstOverflowingTab.current)) {
        return;
      }
      var scrollElStyle = getComputedStyle(scrollRef.current);
      scrollRef.current.scrollTo({
        top: firstOverflowingTab.current.offsetTop - parseInt(scrollElStyle.paddingTop, 10)
      });
    }, [disabled, scrollRef, refs]);
    var onNext = React.useCallback(function () {
      if (disabled || !scrollRef.current) {
        return;
      }
      var scrollBottom = Math.round(scrollRef.current.scrollTop + scrollRef.current.clientHeight);
      var lastOverflowingTab = index.getLastOverflowingTab(refs.items, scrollBottom, orientation);
      if (!(lastOverflowingTab !== null && lastOverflowingTab !== void 0 && lastOverflowingTab.current)) {
        return;
      }
      if (firstItemVisible) {
        setShouldTriggerAdditionalScroll(true);
      }
      var scrollElStyle = getComputedStyle(scrollRef.current);
      scrollRef.current.scrollTo({
        top: Math.round(lastOverflowingTab.current.offsetTop + lastOverflowingTab.current.offsetHeight - scrollRef.current.clientHeight + parseInt(scrollElStyle.paddingTop, 10))
      });
    }, [firstItemVisible, disabled, scrollRef, refs]);
    var PreviousButton = /*#__PURE__*/React__default.default.createElement(VerticalTabs_styles.StyledArrow, {
      type: "button",
      "aria-label": "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u0442\u0430\u0431",
      onClick: onPrev,
      tabIndex: disabled ? -1 : 0,
      disabled: disabled,
      ref: upArrowRef
    }, _IconDisclosureLeft || (_IconDisclosureLeft = /*#__PURE__*/React__default.default.createElement(IconDisclosureLeft.IconDisclosureLeft, {
      color: "inherit"
    })));
    var NextButton = /*#__PURE__*/React__default.default.createElement(VerticalTabs_styles.StyledArrow, {
      type: "button",
      "aria-label": "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0442\u0430\u0431",
      onClick: onNext,
      tabIndex: disabled ? -1 : 0,
      disabled: disabled
    }, _IconDisclosureRight || (_IconDisclosureRight = /*#__PURE__*/React__default.default.createElement(IconDisclosureRight.IconDisclosureRight, {
      color: "inherit"
    })));
    var handleScroll = React.useCallback(function (event) {
      event.stopPropagation();
      var scrollElStyle = getComputedStyle(event.currentTarget);
      var minScrollTop = parseInt(scrollElStyle.paddingLeft, 10);
      var maxScrollTop = event.currentTarget.scrollHeight - event.currentTarget.clientHeight - parseInt(scrollElStyle.paddingTop, 10);
      var scrollTop = Math.round(event.currentTarget.scrollTop);
      setFirstItemVisible(scrollTop <= minScrollTop);
      setLastItemVisible(scrollTop >= maxScrollTop);
    }, [setFirstItemVisible, setLastItemVisible]);
    var onKeyDown = React.useCallback(function (event) {
      if (index$2 === undefined) {
        return;
      }
      var minIndex = 0;
      var maxIndex = refs.items.length - 1;
      var nextIndex;
      switch (event.keyCode) {
        case Keys.end:
          nextIndex = maxIndex;
          break;
        case Keys.up:
          nextIndex = index$2 > minIndex ? index$2 - 1 : index$2;
          break;
        case Keys.down:
          nextIndex = index$2 < maxIndex ? index$2 + 1 : index$2;
          break;
        case Keys.home:
          nextIndex = minIndex;
          break;
        default:
          return;
      }
      if (nextIndex !== index$2) {
        var _refs$items$nextIndex, _refs$items$nextIndex2;
        event.preventDefault();
        (_refs$items$nextIndex = refs.items[nextIndex].current) === null || _refs$items$nextIndex === void 0 || _refs$items$nextIndex.focus();
        (_refs$items$nextIndex2 = refs.items[nextIndex].current) === null || _refs$items$nextIndex2 === void 0 || _refs$items$nextIndex2.scrollIntoView({
          block: 'nearest',
          inline: 'nearest',
          behavior: 'smooth'
        });
      }
    }, [index$2]);
    React.useLayoutEffect(function () {
      var _scrollRef$current, _scrollRef$current2;
      setLastItemVisible(((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollHeight) === ((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientHeight));
    }, [clip]);

    // Этот хук компенсирует появление верхней стрелки при прокрутке
    React.useLayoutEffect(function () {
      if (firstItemVisible || !shouldTriggerAdditionalScroll || !scrollRef.current || !upArrowRef.current) {
        return;
      }
      var style = getComputedStyle(scrollRef.current);
      scrollRef.current.scrollTo({
        top: Math.round(scrollRef.current.scrollTop + upArrowRef.current.clientHeight + parseInt(style.paddingTop, 10))
      });
      setShouldTriggerAdditionalScroll(false);
    }, [firstItemVisible, shouldTriggerAdditionalScroll, scrollRef, upArrowRef]);
    return /*#__PURE__*/React__default.default.createElement(TabsContext.TabsContext.Provider, {
      value: refs
    }, /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
      view: view,
      role: "tablist",
      size: size,
      id: tabsId,
      ref: outerRef,
      disabled: disabled,
      className: index$1.cx(hasTopArrowClass, hasBottomArrowClass, noDividerClass, className),
      onKeyDown: onKeyDown,
      orientation: orientation
    }, rest), !firstItemVisible && clip === 'scroll' && PreviousButton, /*#__PURE__*/React__default.default.createElement(VerticalTabs_styles.StyledContentWrapper, {
      className: index$1.cx(clipScrollClass, clipShowAllClass),
      ref: scrollRef,
      onScroll: handleScroll
    }, /*#__PURE__*/React__default.default.createElement(VerticalTabs_styles.StyledContent, {
      ref: trackRef
    }, children)), !lastItemVisible && clip === 'scroll' && NextButton));
  });
};
var verticalTabsConfig = {
  name: 'VerticalTabs',
  tag: 'div',
  layout: verticalTabsRoot,
  base: VerticalTabs_styles.base,
  variations: {
    size: {
      css: base.base
    },
    view: {
      css: base$1.base
    },
    disabled: {
      css: base$2.base,
      attrs: true
    }
  },
  defaults: {
    view: 'divider',
    size: 'xs'
  }
};

exports.verticalTabsConfig = verticalTabsConfig;
exports.verticalTabsRoot = verticalTabsRoot;
