import React, { useState, useEffect, useRef } from 'react';
import 'react-dom';
import { c as _slicedToArray, l as _typeof } from '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import '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 '../ui/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 '../ui/text.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import '../ui/box.js';
import { r as rgba } from '../generic-2d73c3aa.js';
import { u as useInput } from '../useInput-33ea83d6.js';
import { Label } from '../ui/label.js';

function useTabs(value, onChange, options, optionKey) {
  var _useState = useState([]),
      _useState2 = _slicedToArray(_useState, 2),
      DOMRects = _useState2[0],
      setDOMRects = _useState2[1];

  var _useState3 = useState(value),
      _useState4 = _slicedToArray(_useState3, 2),
      activeIndex = _useState4[0],
      setActiveIndex = _useState4[1];

  var getPosition = function getPosition() {
    var offset = 0;
    var width = 0;
    DOMRects.map(function (DOMElementRect, i) {
      if (i === activeIndex) {
        width = DOMElementRect.width;
      } else if (i < activeIndex) {
        offset += DOMElementRect.width;
      }
    });
    return {
      width: width,
      offset: offset
    };
  };

  var handleRef = function handleRef(index) {
    return function (DOMElement) {
      if (DOMElement) {
        var DOMElementRect = DOMElement.getBoundingClientRect();
        var currentRect = DOMRects[index];

        if (!currentRect || currentRect.width !== DOMElementRect.width) {
          DOMRects[index] = DOMElementRect;
          setDOMRects(DOMRects);
        }
      }
    };
  };

  var handleChange = function handleChange(index) {
    return function () {
      return onChange(options[index]);
    };
  };

  var getOption = function getOption(option) {
    return _typeof(option) !== "object" ? option : option[optionKey || "name"];
  };

  var displayOptions = options.map(function (option) {
    return getOption(option);
  });

  var _getPosition = getPosition(),
      width = _getPosition.width,
      offset = _getPosition.offset;

  useEffect(function () {
    var index;

    if (_typeof(options[0]) !== "object") {
      index = options.indexOf(value);
    } else {
      index = options.findIndex(function (item) {
        return item[optionKey] === value;
      });
    }

    setActiveIndex(index);
  }, [value]);
  return {
    displayOptions: displayOptions,
    handleChange: handleChange,
    handleRef: handleRef,
    width: width,
    offset: offset,
    activeIndex: activeIndex
  };
}

var css = ".TabOption_tabOption__2X2-s {\n  padding: 4px 8px;\n  min-width: 64px;\n  cursor: pointer;\n  border-right: 1px solid #000;\n  text-align: center; }\n  .TabOption_tabOption__2X2-s:last-child {\n    border-right: none; }\n\n.TabOption_tabOptionText__3KLHs {\n  font-size: 12px;\n  font-weight: 400;\n  transition: 0.2s ease-out;\n  text-align: center; }\n  .TabOption_tabOptionText__3KLHs.TabOption_selected__1rBbX {\n    color: #fff; }\n";
var styles = {"tabOption":"TabOption_tabOption__2X2-s","tabOptionText":"TabOption_tabOptionText__3KLHs","selected":"TabOption_selected__1rBbX"};
styleInject(css);

var TabOption = function TabOption(_ref) {
  var children = _ref.children,
      onClick = _ref.onClick,
      selected = _ref.selected,
      innerRef = _ref.innerRef,
      prefixClassName = _ref.prefixClassName;

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

  return React.createElement("div", {
    style: {
      borderRightColor: primaryColor
    },
    ref: innerRef,
    className: "".concat(styles.tabOption, " ").concat(selected ? styles.selected : "", " ").concat(prefixClassName, "-option ").concat(selected ? "".concat(prefixClassName, "-option-selected") : ""),
    onClick: onClick
  }, React.createElement("span", {
    style: {
      color: primaryColor
    },
    className: "".concat(styles.tabOptionText, " ").concat(selected ? styles.selected : "", " ").concat(prefixClassName, "-option-text ").concat(selected ? "".concat(prefixClassName, "-option-selected-text") : "")
  }, children));
};

TabOption.propTypes = {
  children: PropTypes.string,
  onClick: PropTypes.func,
  selected: PropTypes.bool,
  innerRef: PropTypes.func,
  prefixClassName: PropTypes.string
};
TabOption.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "TabOption",
  "props": {
    "children": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "onClick": {
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "selected": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "innerRef": {
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    }
  }
};

var css$1 = ".Tab_tab__unL0B {\n  position: relative;\n  margin-bottom: 24px;\n  outline: none; }\n\n.Tab_textHint__3ukOk {\n  display: block;\n  color: #999;\n  font-size: 13px;\n  font-weight: 400;\n  margin-bottom: 8px;\n  margin-left: 2px;\n  margin-top: -6px;\n  transition: 0.2s ease-out; }\n\n.Tab_tabOptionsWrapper__2SvAL {\n  position: relative;\n  display: inline-flex;\n  overflow: hidden;\n  border-radius: 8px;\n  border: 1px solid #000;\n  margin-left: 2px; }\n  .Tab_tabOptionsWrapper__2SvAL.Tab_disabled__bHiUN {\n    pointer-events: none;\n    opacity: 0.7;\n    filter: grayscale(1); }\n\n.Tab_tabOptions__17Ahv {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  overflow: hidden; }\n\n.Tab_tabOptionsBG__1yw9B {\n  position: absolute;\n  height: 100%;\n  opacity: 0.9;\n  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1); }\n";
var styles$1 = {"tab":"Tab_tab__unL0B","textHint":"Tab_textHint__3ukOk","tabOptionsWrapper":"Tab_tabOptionsWrapper__2SvAL","disabled":"Tab_disabled__bHiUN","tabOptions":"Tab_tabOptions__17Ahv","tabOptionsBG":"Tab_tabOptionsBG__1yw9B"};
styleInject(css$1);

function Tab(_ref) {
  var className = _ref.className,
      prefixClassName = _ref.prefixClassName,
      error = _ref.error,
      label = _ref.label,
      _ref$options = _ref.options,
      options = _ref$options === void 0 ? [] : _ref$options,
      disabled = _ref.disabled,
      value = _ref.value,
      onChange = _ref.onChange,
      onFocus = _ref.onFocus,
      onBlur = _ref.onBlur,
      optionKey = _ref.optionKey;

  var _useTabs = useTabs(value, onChange, options, optionKey),
      handleChange = _useTabs.handleChange,
      handleRef = _useTabs.handleRef,
      width = _useTabs.width,
      offset = _useTabs.offset,
      activeIndex = _useTabs.activeIndex,
      displayOptions = _useTabs.displayOptions;

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

  var _TextInputDOM = useRef();

  var _useInput = useInput(_TextInputDOM, onFocus, onBlur),
      focused = _useInput.focused,
      handleFocus = _useInput.handleFocus,
      handleBlur = _useInput.handleBlur;

  var disabledClassName = disabled ? styles$1.disabled : "";
  return React.createElement("div", {
    "data-testid": "tab",
    tabIndex: "0",
    onFocus: handleFocus,
    onBlur: handleBlur,
    className: "".concat(styles$1.tab, " ").concat(className, " ").concat(prefixClassName)
  }, React.createElement(Label, {
    focused: focused,
    error: error,
    className: "".concat(styles$1.dropdownLabel, " ").concat(prefixClassName, "-label")
  }, label), React.createElement("div", {
    style: {
      borderColor: primaryColor
    },
    className: "".concat(styles$1.tabOptionsWrapper, " ").concat(disabledClassName, " ").concat(prefixClassName, "-options-wrapper")
  }, React.createElement("div", {
    style: {
      backgroundColor: rgba(primaryColor, 0.2)
    },
    className: "".concat(styles$1.tabOptions, " ").concat(prefixClassName, "-options")
  }, displayOptions.map(function (displayOption, i) {
    return React.createElement(TabOption, {
      innerRef: handleRef(i),
      onClick: handleChange(i),
      selected: activeIndex === i,
      prefixClassName: prefixClassName
    }, displayOption);
  })), React.createElement("div", {
    className: "".concat(styles$1.tabOptionsBG, " ").concat(prefixClassName, "-selected"),
    style: {
      width: width,
      left: offset,
      backgroundColor: primaryColor
    }
  })));
}

Tab.propTypes = {
  /** The classname to be appended to the outermost element */
  className: PropTypes.string,

  /** prefix to be appended to the child elements */
  prefixClassName: PropTypes.string,

  /** Disables the Tabs  */
  disabled: PropTypes.bool,

  /** If error occurs, pass on the error */
  error: PropTypes.string,

  /** Label for Tabs  */
  label: PropTypes.string,

  /** On blur function */
  onBlur: PropTypes.func,

  /** On Tab change function */
  onChange: PropTypes.func,

  /** On focus function */
  onFocus: PropTypes.func,

  /** If array of object is passed, the key which is too be displayed */
  optionKey: PropTypes.string,

  /** Array of strings or objects to be passed as options */
  options: PropTypes.array,

  /** Current tab selected */
  value: PropTypes.string
};
Tab.defaultProps = {
  className: "",
  prefixClassName: "",
  disabled: false,
  error: "",
  label: "",
  onBlur: function onBlur() {},
  onChange: function onChange() {},
  onFocus: function onFocus() {},
  optionKey: "",
  options: [],
  value: ""
};
Tab.classNames = {
  $prefix: "Outermost element",
  "$prefix-label": "Label element",
  "$prefix-options-wrapper": "Wrapper around options tab",
  "$prefix-options": "Container holding all the options",
  "$prefix-option": "Individual option",
  "$prefix-option-text": "Text inside individual option",
  "$prefix-selected": "Background above selected option",
  "$prefix-option-selected": "Selected option div",
  "$prefix-option-selected-text": "Selected option text"
};
Tab.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Tab",
  "props": {
    "options": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "type": {
        "name": "array"
      },
      "required": false,
      "description": "Array of strings or objects to be passed as options"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The classname to be appended to the outermost element"
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "prefix to be appended to the child elements"
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Disables the Tabs"
    },
    "error": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "If error occurs, pass on the error"
    },
    "label": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Label for Tabs"
    },
    "onBlur": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "On blur function"
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "On Tab change function"
    },
    "onFocus": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "On focus function"
    },
    "optionKey": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "If array of object is passed, the key which is too be displayed"
    },
    "value": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Current tab selected"
    }
  }
};

export default Tab;
