import React, { useCallback, useState, useEffect } from 'react';
import 'react-dom';
import { d as _objectWithoutProperties, e as _extends, c as _slicedToArray } from '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import '../index-930c2100.js';
import '../hooks/useActivify.js';
import '../overlays/tooltip.js';
import '../key_codes-a5a2b85e.js';
import '../index-6b96e57a.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import Icon from './icon.js';
import '../info-fc9c81b4.js';
import '../close-cd95ea58.js';
import '../close-v2-118f2b87.js';
import '../file_placeholder-51e080e8.js';
import '../arrow-e522a0cc.js';
import '../tick-ee41abaf.js';
import '../angle-down-4038e060.js';
import '../checkmark-b6f07b8e.js';
import '../search-da5a95f5.js';
import '../overlays/withTooltip.js';
import { C as Context } from '../index-91504e81.js';
import Text from './text.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import Box from './box.js';

var tabsStyle = function tabsStyle(props) {
  return {
    position: "relative",
    padding: props.theme.space.zero
  };
};

var tabsItemsStyle = function tabsItemsStyle(props) {
  return {
    alignItems: "center",
    padding: props.theme.space.zero
  };
};

var tabsIndicatorStyle = function tabsIndicatorStyle(props) {
  return {
    position: "absolute",
    left: 0,
    bottom: 0,
    height: "2px",
    width: "1px",
    transformOrigin: "0 0",
    transition: "transform 0.5s cubic-bezier(0.175, 0.5, 0.12, 1)",
    backgroundColor: props.theme.colors.blue.haptik,
    transform: "translateX(".concat(props.left, "px) scale(").concat(props.width, ", 1)"),
    padding: props.theme.space.zero
  };
};

var ThemedTabs = styled(Box)(tabsStyle);
var ThemedTabsItems = styled(Box)(tabsItemsStyle);
var ThemedTabsIndicator = styled(Box)(tabsIndicatorStyle);

var tabsItemsStyle$1 = function tabsItemsStyle(props) {
  return {
    flexDirection: "column",
    alignItems: "center",
    padding: "".concat(props.theme.space.sm, "px ").concat(props.theme.space.md, "px"),
    cursor: "pointer",
    transition: "0.2s ease-out",
    opacity: props.disabled ? 0.2 : props.active ? 1 : 0.75,
    pointerEvents: props.disabled ? "none" : "auto",
    "&:hover": {
      opacity: 1
    }
  };
};

var ThemedTabsItems$1 = styled(Box)(tabsItemsStyle$1);

var css = ".TabsItem_TabsItem__2f7kr {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 8px 12px;\n  cursor: pointer;\n  opacity: 0.75;\n  transition: 0.2s ease-out; }\n  .TabsItem_TabsItem__2f7kr:hover {\n    opacity: 1; }\n  .TabsItem_TabsItem__2f7kr.TabsItem_active__5CzlS {\n    opacity: 1; }\n  .TabsItem_TabsItem__2f7kr.TabsItem_disabled__18BAS {\n    opacity: 0.2;\n    pointer-events: none; }\n\n.TabsItem_TabsItemIcon__1K-v5 {\n  margin-bottom: 4px;\n  width: 28px;\n  height: 28px; }\n  .TabsItem_TabsItemIcon__1K-v5 path,\n  .TabsItem_TabsItemIcon__1K-v5 circle,\n  .TabsItem_TabsItemIcon__1K-v5 rect,\n  .TabsItem_TabsItemIcon__1K-v5 polyline {\n    transition: 0.2s ease-out; }\n  .TabsItem_TabsItemIcon__1K-v5.TabsItem_active__5CzlS path,\n  .TabsItem_TabsItemIcon__1K-v5.TabsItem_active__5CzlS circle,\n  .TabsItem_TabsItemIcon__1K-v5.TabsItem_active__5CzlS rect,\n  .TabsItem_TabsItemIcon__1K-v5.TabsItem_active__5CzlS polyline {\n    stroke: #37aded;\n    fill: #fff; }\n  .TabsItem_TabsItemIcon__1K-v5.TabsItem_active__5CzlS #TabsItem_icon10__OuPtG path {\n    fill: transparent !important; }\n\n.TabsItem_TabsItemText__nrbzr {\n  font-size: 14px;\n  text-align: center;\n  -webkit-font-smoothing: antialiased; }\n  .TabsItem_TabsItemText__nrbzr.TabsItem_big__1h_fE {\n    font-size: 16px; }\n";
var styles = {"TabsItem":"TabsItem_TabsItem__2f7kr","active":"TabsItem_active__5CzlS","disabled":"TabsItem_disabled__18BAS","TabsItemIcon":"TabsItem_TabsItemIcon__1K-v5","icon10":"TabsItem_icon10__OuPtG","TabsItemText":"TabsItem_TabsItemText__nrbzr","big":"TabsItem_big__1h_fE"};
styleInject(css);

/**
 * Renders an individual tab with an optional icon and text
 * if the children is of type string then it uses it as a title and renders
 * the tab with our design.
 * If the children is an element instead, then it just directly get's rendered inside the div
 */

var TabsItem = function TabsItem(_ref) {
  var children = _ref.children,
      active = _ref.active,
      disabled = _ref.disabled,
      icon = _ref.icon,
      prefixClassName = _ref.prefixClassName,
      onClick = _ref.onClick,
      innerRef = _ref.innerRef,
      value = _ref.value,
      type = _ref.type,
      themed = _ref.themed,
      designProps = _objectWithoutProperties(_ref, ["children", "active", "disabled", "icon", "prefixClassName", "onClick", "innerRef", "value", "type", "themed"]);

  var _React$useContext = React.useContext(Context),
      primaryColor = _React$useContext.primaryColor;

  var component = typeof children !== "string" && typeof children !== "number" ? children : null;
  var title = component ? null : children;
  var activeClassName = active ? "".concat(styles.active, " ").concat(prefixClassName, "-active") : "";
  var activeIconClassName = active ? "active" : "";
  var disabledClassName = disabled ? styles.disabled : "";
  var bigClassName = type === "big" ? styles.big : "";
  var handleOnClick = useCallback(function () {
    onClick(value);
  }, [value, onClick]);

  if (themed) {
    return React.createElement(ThemedTabsItems$1, _extends({
      onClick: handleOnClick,
      ref: innerRef,
      disabled: disabled,
      active: active
    }, designProps), component ? React.cloneElement(component, {
      active: active
    }) : React.createElement(React.Fragment, null, icon ? React.createElement(Icon, {
      src: icon,
      className: "".concat(styles.TabsItemIcon, " ").concat(bigClassName, " ").concat(prefixClassName, "-icon ").concat(activeIconClassName)
    }) : null, React.createElement(Text, {
      variant: "h3.semi-bold",
      color: "".concat(active ? "blue" : "grey", ".dark"),
      textAlign: "center"
    }, title)));
  }

  return React.createElement("div", {
    onClick: handleOnClick,
    ref: innerRef,
    className: "".concat(styles.TabsItem, " ").concat(prefixClassName, " ").concat(activeClassName, " ").concat(disabledClassName, " ").concat(bigClassName)
  }, component ? React.cloneElement(component, {
    active: active
  }) : React.createElement(React.Fragment, null, icon ? React.createElement(Icon, {
    src: icon,
    className: "".concat(styles.TabsItemIcon, " ").concat(bigClassName, " ").concat(prefixClassName, "-icon ").concat(activeIconClassName)
  }) : null, React.createElement("span", {
    style: {
      color: active ? primaryColor : undefined
    },
    className: "".concat(styles.TabsItemText, " ").concat(activeClassName, " ").concat(bigClassName, " ").concat(prefixClassName, "-text")
  }, title)));
};
TabsItem.propTypes = {
  /* If the children is an element instead, then it just directly get's rendered inside the div */
  children: PropTypes.node,

  /* Whether the tab inside the tabs is active or not */
  active: PropTypes.bool,

  /* Whether the tab is disabled (not clickable) */
  disabled: PropTypes.bool,

  /* The icon to render inside the tab. Can be a string (icon type) or the icon element itself */
  icon: PropTypes.oneOf([PropTypes.string, PropTypes.node]),

  /* The classname that  gets added to all the dom elements of this component */
  prefixClassName: PropTypes.string,

  /* The onClick callback */
  onClick: PropTypes.func,

  /* The ref that's passed down to the top level DOM Element */
  innerRef: PropTypes.object,

  /* The value of the tab item. This gets passed to the onClick as a parameter */
  value: PropTypes.string,

  /* The type of tab item. (big/small) */
  type: PropTypes.string,

  /* Use themed version of Tabs */
  themed: PropTypes.bool
};
TabsItem.__docgenInfo = {
  "description": "Renders an individual tab with an optional icon and text\nif the children is of type string then it uses it as a title and renders\nthe tab with our design.\nIf the children is an element instead, then it just directly get's rendered inside the div",
  "methods": [],
  "displayName": "TabsItem",
  "props": {
    "children": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": ""
    },
    "active": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "disabled": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "icon": {
      "type": {
        "name": "enum",
        "value": [{
          "value": "PropTypes.string",
          "computed": true
        }, {
          "value": "PropTypes.node",
          "computed": true
        }]
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "onClick": {
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "innerRef": {
      "type": {
        "name": "object"
      },
      "required": false,
      "description": ""
    },
    "value": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "type": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "themed": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    }
  }
};

/**
 * React hook to manage calculation and positioning of the tab indicator
 * It is also responsible for injecting children with additional calculated
 * props.
 * @export
 * @param {string} value the identifier of the tab selected
 * @param {array} DOMRefs the array of dom element refs used for width and offset calc
 * @param {array} children the array of children that need to be rendered as tabs
 * @returns {array} returns an array containing left, width, renderTabs(func to render tabs)
 */

function useTabs(value, DOMRefs, children) {
  /**
   * activeIndex tracks the index of the currently selected menu item
   * left is the x-offset of the selected menu item (where the underline starts)
   * width the is width of the selected menu item
   * @type {Object}
   */
  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      left = _useState2[0],
      setLeft = _useState2[1];

  var _useState3 = useState(0),
      _useState4 = _slicedToArray(_useState3, 2),
      width = _useState4[0],
      setWidth = _useState4[1];

  var _useState5 = useState(0),
      _useState6 = _slicedToArray(_useState5, 2),
      activeIndex = _useState6[0],
      setActiveIndex = _useState6[1];
  /**
   * This calculates the width and the offset of a particular menu item (whose
   * index is the param). Uses getBoundingClientRect and the DOMElements to
   * determine the right values
   * @param  {string} value the value for which the index needs to be calculated
   * @returns {number} the index corresponding to the value provided
   */


  var getIndexFromValue = function getIndexFromValue(value) {
    var index = -1;
    React.Children.forEach(children, function (child, i) {
      var childValue = child.props.value;

      if (typeof childValue === "string" && childValue === value) {
        index = i;
      }
    });
    return index;
  };
  /**
   * Returns the width and offset of the item that's selected
   * @param  {number} index the index of the tab for which the calculation needs to run
   * @return {array} an array containing the left offset and the width of the indicator
   */


  var calcWidthAndPosition = function calcWidthAndPosition(index) {
    var left = 0;
    var width = 0;
    DOMRefs.map(function (DOMElement, i) {
      if (i < index && i >= 0) {
        left += DOMElement.getBoundingClientRect().width;
      } else if (i === index) {
        width = DOMElement.getBoundingClientRect().width - 1;
      }
    });
    return [left, width];
  };
  /**
   * On mount we check if there's already a menu item that's selected, if yes,
   * then calculate it's left position as well as the width. So that we can
   * set the underline at the right position with the right dimensions
   * @return {[type]} [description]
   */


  useEffect(function () {
    var index = getIndexFromValue(value);

    var _calcWidthAndPosition = calcWidthAndPosition(index),
        _calcWidthAndPosition2 = _slicedToArray(_calcWidthAndPosition, 2),
        left = _calcWidthAndPosition2[0],
        width = _calcWidthAndPosition2[1];

    setLeft(left);
    setWidth(width);
    setActiveIndex(index);
  }, [value, DOMRefs.length]);
  /**
   * Injects props such as innerRef and the active bool by
   * cloning the element
   * @returns children cloned with Props
   */

  var renderTabs = function renderTabs() {
    return React.Children.map(children, function (child, i) {
      return React.cloneElement(child, {
        active: activeIndex === i,
        innerRef: function innerRef(ref) {
          if (ref) DOMRefs[i] = ref;
        }
      });
    });
  };

  return [left, width, renderTabs];
}

var css$1 = ".Tabs_Tabs__2Pf1I {\n  position: relative; }\n\n.Tabs_TabsItems__336bX {\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid #eee; }\n\n.Tabs_TabsIndicator__2Um8F {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  height: 2px;\n  width: 1px;\n  transform-origin: 0 0;\n  transition: 0.5s cubic-bezier(0.175, 0.5, 0.12, 1); }\n";
var styles$1 = {"Tabs":"Tabs_Tabs__2Pf1I","TabsItems":"Tabs_TabsItems__336bX","TabsIndicator":"Tabs_TabsIndicator__2Um8F"};
styleInject(css$1);

/**
 * Renders the container for tabs and handles the calculation and placement of the tab
 * indicator.
 * It also exposes a static property called Item which is what the component uses to render the children
 */

var Tabs = function Tabs(_ref) {
  var className = _ref.className,
      prefixClassName = _ref.prefixClassName,
      children = _ref.children,
      _ref$value = _ref.value,
      value = _ref$value === void 0 ? "" : _ref$value,
      _ref$themed = _ref.themed,
      themed = _ref$themed === void 0 ? false : _ref$themed,
      designProps = _objectWithoutProperties(_ref, ["className", "prefixClassName", "children", "value", "themed"]);

  var _React$useContext = React.useContext(Context),
      primaryColor = _React$useContext.primaryColor;

  var DOMRefs = React.useRef([]);

  var _useTabs = useTabs(value, DOMRefs.current, children),
      _useTabs2 = _slicedToArray(_useTabs, 3),
      left = _useTabs2[0],
      width = _useTabs2[1],
      renderTabs = _useTabs2[2];

  var transform = "translateX(".concat(left, "px) scale(").concat(width, ", 1)");
  React.useEffect(function () {
    DOMRefs.current = new Array(React.Children.count(children)).fill().map(function () {
      return React.createRef();
    });
  }, [children]);
  if (themed) return React.createElement(ThemedTabs, designProps, React.createElement(ThemedTabsItems, null, renderTabs()), React.createElement(ThemedTabsIndicator, {
    left: left,
    width: width
  }));
  return React.createElement("div", {
    "data-testid": "tabs",
    className: "".concat(styles$1.Tabs, " ").concat(prefixClassName, " ").concat(className)
  }, React.createElement("div", {
    className: "".concat(styles$1.TabsItems, " ").concat(prefixClassName, "-items")
  }, renderTabs()), React.createElement("div", {
    style: {
      transform: transform,
      backgroundColor: primaryColor
    },
    className: "".concat(styles$1.TabsIndicator, " ").concat(prefixClassName, "-indicator")
  }));
}; // TabsItem becomes available as a static property
// and can be referred to as <Tabs.Item .../>


Tabs.Item = TabsItem;
Tabs.propTypes = {
  /* The value of the current tab selected */
  value: PropTypes.string,

  /* The classname to be attached to the outermost element */
  className: PropTypes.string,

  /* The classname that  gets added to all the dom elements of this component */
  prefixClassName: PropTypes.string,

  /* tabs that need to be rendered. Expect <Tabs.Item> as children */
  children: PropTypes.node,

  /* Use themed version of Tabs */
  themed: PropTypes.bool
};
Tabs.__docgenInfo = {
  "description": "Renders the container for tabs and handles the calculation and placement of the tab\nindicator.\nIt also exposes a static property called Item which is what the component uses to render the children",
  "methods": [],
  "displayName": "Tabs",
  "props": {
    "value": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "themed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "className": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "children": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": ""
    }
  }
};

export default Tabs;
