import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import { createBEM } from '@zarm-design/bem';
import * as React from 'react';
import TabPanel from './TabPanel';
import Carousel from '../carousel';
import { getTransformPropValue, getPxStyle } from './util/index';
import { scrollTo } from '../utils/dom';
import { ConfigContext } from '../config-provider';

var getChildChecked = function getChildChecked(children) {
  var selectIndex;
  React.Children.forEach(children, function (item, index) {
    if ( /*#__PURE__*/React.isValidElement(item) && item.props && item.props.selected) {
      selectIndex = index;
    }
  });
  return selectIndex;
};

var parseValueBoundary = function parseValueBoundary(inputValue, children) {
  var count = React.Children.count(children);

  if (inputValue <= 0) {
    return 0;
  }

  if (inputValue > count - 1) {
    return count - 1;
  }

  return inputValue;
};

var getValue = function getValue(props, defaultValue) {
  if (typeof props.value !== 'undefined') {
    return parseValueBoundary(props.value, props.children);
  }

  if (typeof props.defaultValue !== 'undefined') {
    return parseValueBoundary(props.defaultValue, props.children);
  }

  if (getChildChecked(props.children)) {
    return parseValueBoundary(getChildChecked(props.children), props.children);
  }

  return parseValueBoundary(defaultValue, props.children);
};

var Tabs = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var _ref;

  var className = props.className,
      style = props.style,
      value = props.value,
      defaultValue = props.defaultValue,
      disabled = props.disabled,
      swipeable = props.swipeable,
      scrollable = props.scrollable,
      direction = props.direction,
      lineWidth = props.lineWidth,
      onChange = props.onChange,
      children = props.children;
  var carouselRef = React.useRef(null);
  var tablistRef = React.useRef(null);

  var _React$useState = React.useState(0),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      itemWidth = _React$useState2[0],
      setItemWidth = _React$useState2[1];

  var _React$useState3 = React.useState(getValue({
    value: value,
    defaultValue: defaultValue,
    children: children
  }, 0)),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      currentValue = _React$useState4[0],
      setCurrentValue = _React$useState4[1];

  var _React$useContext = React.useContext(ConfigContext),
      prefixCls = _React$useContext.prefixCls;

  var bem = createBEM('tabs', {
    prefixCls: prefixCls
  });
  var isVertical = direction === 'vertical';
  var parseValue = React.useCallback(function (inputValue) {
    return parseValueBoundary(inputValue, children);
  }, [children]);
  var classes = bem([(_ref = {}, _defineProperty(_ref, "".concat(direction), true), _defineProperty(_ref, "scroll", scrollable), _ref), className]); // 计算 line 大小和位置

  var caclLineSizePos = function caclLineSizePos() {
    var newValue = parseValue(currentValue);
    var ChildCount = React.Children.count(children);
    var pos = 100 * newValue;

    if (scrollable && tablistRef.current) {
      var el = tablistRef.current.children[newValue];
      var _ref2 = el,
          _ref2$offsetLeft = _ref2.offsetLeft,
          offsetLeft = _ref2$offsetLeft === void 0 ? 0 : _ref2$offsetLeft,
          _ref2$offsetTop = _ref2.offsetTop,
          offsetTop = _ref2$offsetTop === void 0 ? 0 : _ref2$offsetTop;
      pos = isVertical ? offsetTop : offsetLeft;
    }

    var size = scrollable ? "".concat(itemWidth, "px") : "".concat(100 / ChildCount, "%");
    var transformValue = scrollable ? getPxStyle(pos, 'px', isVertical) : getPxStyle(pos, '%', isVertical);
    var styleUl = getTransformPropValue(transformValue);
    var itemSize = isVertical ? {
      height: "".concat(size)
    } : {
      width: "".concat(size)
    };
    return _objectSpread(_objectSpread({}, styleUl), itemSize);
  };

  var onTabChange = React.useCallback(function (newValue) {
    if (typeof value === 'undefined') {
      setCurrentValue(newValue);
    }

    typeof onChange === 'function' && onChange(newValue);
  }, [value, onChange]);

  var onTabClick = function onTabClick(tab, index) {
    if (disabled || tab.props.disabled) {
      return;
    }

    if (swipeable) {
      carouselRef.current && carouselRef.current.onSlideTo(index);
      return;
    }

    onTabChange(index);
  };

  var lineStyle = caclLineSizePos();
  var lineInnerRender;

  if (lineWidth) {
    lineStyle.backgroundColor = 'transparent';
    lineInnerRender = /*#__PURE__*/React.createElement("span", {
      className: bem('line__inner'),
      style: {
        width: lineWidth
      }
    });
  } // 渲染内容


  var contentRender;

  if (swipeable) {
    contentRender = /*#__PURE__*/React.createElement(Carousel, {
      swipeable: !disabled,
      direction: direction,
      showPagination: false,
      activeIndex: parseValue(currentValue),
      ref: carouselRef,
      onChange: onTabChange
    }, React.Children.map(children, function (item, index) {
      return /*#__PURE__*/React.createElement("div", {
        key: +index
      }, item.props.children);
    }));
  } else {
    contentRender = React.Children.map(children, function (item, index) {
      return /*#__PURE__*/React.createElement(TabPanel, _extends({}, item.props, {
        selected: parseValue(currentValue) === index
      }));
    });
  }

  var renderTabs = function renderTabs(tab, index) {
    var itemCls = bem('tab', [{
      disabled: disabled || tab.props.disabled,
      active: parseValue(currentValue) === index
    }, tab.props.className]);
    return /*#__PURE__*/React.createElement("li", {
      role: "tab",
      key: +index,
      className: itemCls,
      onClick: function onClick() {
        return onTabClick(tab, index);
      }
    }, tab.props.title);
  }; // 渲染选项


  var tabsRender = React.Children.map(children, renderTabs);

  var getItemStyle = function getItemStyle(el, prop) {
    var newValue = '0';

    if (prop in el.style) {
      newValue = el.style[prop] || window.getComputedStyle(el).getPropertyValue(prop) || '0';
    }

    return newValue;
  };

  var calculateLineWidth = React.useCallback(function () {
    if (!scrollable) {
      return;
    }

    var newValue = parseValue(currentValue);
    var el = tablistRef.current.children[newValue];
    var size = isVertical ? getItemStyle(el, 'height') : getItemStyle(el, 'width');
    setItemWidth(parseInt(size.toString(), 10));
  }, [parseValue, currentValue, isVertical, scrollable]);
  var calculateScorllLeftLocation = React.useCallback(function () {
    if (!scrollable) {
      return false;
    }

    var newValue = parseValue(currentValue);
    var prevTabItem = tablistRef.current.childNodes[newValue];

    if (scrollable && tablistRef.current && prevTabItem) {
      var _tablistRef$current = tablistRef.current,
          _tablistRef$current$o = _tablistRef$current.offsetWidth,
          layoutOffsetWidth = _tablistRef$current$o === void 0 ? 0 : _tablistRef$current$o,
          _tablistRef$current$o2 = _tablistRef$current.offsetHeight,
          layoutOffsetHeight = _tablistRef$current$o2 === void 0 ? 0 : _tablistRef$current$o2;
      var left = prevTabItem.offsetLeft + prevTabItem.offsetWidth / 2 - layoutOffsetWidth / 2;
      var top = prevTabItem.offsetTop + prevTabItem.offsetHeight / 2 - layoutOffsetHeight / 2;
      scrollTo(tablistRef.current, top, left, 0.3);
    }
  }, [parseValue, currentValue, scrollable]);
  React.useEffect(function () {
    if (React.Children.count(children)) {
      calculateLineWidth();
      calculateScorllLeftLocation();
    }
  }, [calculateLineWidth, calculateScorllLeftLocation, children]);
  React.useEffect(function () {
    setCurrentValue(getValue({
      value: value,
      defaultValue: defaultValue,
      children: children
    }, 0));
  }, [value, defaultValue, children]);
  return /*#__PURE__*/React.createElement("div", {
    ref: ref,
    className: classes,
    style: style
  }, /*#__PURE__*/React.createElement("div", {
    className: bem('header')
  }, /*#__PURE__*/React.createElement("ul", {
    className: bem('tablist'),
    role: "tablist",
    ref: tablistRef
  }, tabsRender, /*#__PURE__*/React.createElement("div", {
    className: bem('line'),
    style: lineStyle
  }, lineInnerRender))), /*#__PURE__*/React.createElement("div", {
    className: bem('body')
  }, contentRender));
});
Tabs.displayName = 'Tabs';
Tabs.defaultProps = {
  disabled: false,
  swipeable: false,
  scrollable: false,
  direction: 'horizontal'
};
export default Tabs;