import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "value", "onChange", "color", "variant", "scrollButtons", "className"];
import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import { Root as TabsRoot, List as TabsList } from "@radix-ui/react-tabs";
import cx from "classnames";
import ChevronRight from "../../Icon/ChevronRight";
import ChevronLeft from "../../Icon/ChevronLeft";
import IconButton from "../IconButton";
import createComponent from "../../system/createComponent";
import { getColorsLabels } from "../../styles/colors";
import getClasses from "./styles";
var colorList = getColorsLabels(true);

function Tabs(props) {
  var children = props.children,
      value = props.value,
      onChange = props.onChange,
      color = props.color,
      variant = props.variant,
      scrollButtons = props.scrollButtons,
      className = props.className,
      restProps = _objectWithoutProperties(props, _excluded);

  var _useState = useState({
    left: scrollButtons === "on",
    right: scrollButtons !== "off"
  }),
      _useState2 = _slicedToArray(_useState, 2),
      showScrollButtons = _useState2[0],
      setShowScrollButtons = _useState2[1]; // @ts-ignore


  var classes = getClasses({
    color: color,
    variant: variant,
    hasScroll: showScrollButtons.left || showScrollButtons.right
  });
  var classNames = cx(_defineProperty({}, classes.standardList, variant !== "caption"), _defineProperty({}, classes.captionList, variant === "caption"), className);
  useEffect(function () {
    if (scrollButtons === "auto") {
      var tabsList = document.getElementById("tabs-list");

      var iconVisibility = function iconVisibility() {
        var scrollLeftValue = Math.ceil(tabsList.scrollLeft);
        var scrollableWidth = tabsList.scrollWidth - tabsList.clientWidth;
        setShowScrollButtons({
          left: scrollLeftValue > 0,
          right: scrollableWidth > scrollLeftValue
        });
      };

      iconVisibility();
      tabsList.addEventListener("scroll", iconVisibility);
      window.addEventListener("resize", iconVisibility);
      return function () {
        tabsList.removeEventListener("scroll", iconVisibility);
        window.removeEventListener("resize", iconVisibility);
      };
    }
  }, []);
  return /*#__PURE__*/React.createElement(TabsRoot, _extends({
    value: value,
    onValueChange: onChange,
    activationMode: "manual",
    className: classes.root
  }, restProps), showScrollButtons.left && /*#__PURE__*/React.createElement(IconButton, {
    icon: /*#__PURE__*/React.createElement(ChevronLeft, null),
    id: "scrolling-button-left",
    onClick: function onClick() {
      return document.getElementById("tabs-list").scrollLeft -= 200;
    },
    className: cx(classes.scrollArrow, classes.leftArrow)
  }), /*#__PURE__*/React.createElement(TabsList, {
    id: "tabs-list",
    className: classNames
  }, children), showScrollButtons.right && /*#__PURE__*/React.createElement(IconButton, {
    icon: /*#__PURE__*/React.createElement(ChevronRight, null),
    id: "scrolling-button-right",
    onClick: function onClick() {
      return document.getElementById("tabs-list").scrollLeft += 200;
    },
    className: cx(classes.scrollArrow, classes.rightArrow)
  }));
}

Tabs.propTypes = {
  className: PropTypes.string,
  value: PropTypes.string,
  onChange: PropTypes.func,
  color: PropTypes.oneOf(colorList),
  variant: PropTypes.oneOf(["standard", "scrollable", "caption"]),
  scrollButtons: PropTypes.oneOf(["auto", "on", "off"]),
  sx: PropTypes.object
};
Tabs.defaultProps = {
  color: "primary",
  variant: "scrollable",
  scrollButtons: "auto"
};
export default createComponent(Tabs);