"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.TabListItem = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _reactCollapse = _interopRequireDefault(require("@kunukn/react-collapse"));

var _Icons = require("../../../../../Common/Icons");

var _Typography = require("../../../../../Common/Typography");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;

var TabContent = function TabContent(props) {
  var open = props.open;
  var _props$tab = props.tab,
      content = _props$tab.content,
      isComponent = _props$tab.isComponent;
  return /*#__PURE__*/_react["default"].createElement(Wrapper, {
    open: open,
    className: "mb-3"
  }, /*#__PURE__*/_react["default"].createElement(_reactCollapse["default"], {
    isOpen: open,
    transition: "height 290ms cubic-bezier(.4, 0, .2, 1)"
  }, isComponent ? /*#__PURE__*/_react["default"].createElement(Content, {
    open: open
  }, content) : /*#__PURE__*/_react["default"].createElement(Content, {
    open: open,
    dangerouslySetInnerHTML: {
      __html: content
    }
  })));
};

var TabListItem = function TabListItem(props) {
  var tab = props.tab,
      open = props.open,
      onClick = props.onClick,
      isLast = props.isLast;
  return /*#__PURE__*/_react["default"].createElement(Border, {
    isLast: isLast
  }, /*#__PURE__*/_react["default"].createElement(ListItem, {
    role: "button",
    onClick: onClick(tab.name)
  }, tab.isComponent && tab.headerComponent, !tab.isComponent && /*#__PURE__*/_react["default"].createElement(ItemLabel, null, tab.name), /*#__PURE__*/_react["default"].createElement(IconWrapper, {
    open: open
  }, /*#__PURE__*/_react["default"].createElement(_Icons.IconArrowDown, {
    width: "24",
    height: "24"
  }))), /*#__PURE__*/_react["default"].createElement(TabContent, {
    open: open,
    tab: tab
  }));
};

exports.TabListItem = TabListItem;

var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  overflow: ", ";\n"])), function (props) {
  return props.open ? 'initial' : 'hidden';
});

var Border = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  border-top: 1px solid;\n  ", "\n  border-color: ", ";\n"])), function (props) {
  return props.isLast ? 'border-bottom: 1px solid;' : '';
}, function (_ref) {
  var theme = _ref.theme;
  return theme.palette.light;
});

var Content = _styledComponents["default"].div.attrs({
  className: 'py-2'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  max-height: 0;\n  ", ";\n"])), function (props) {
  return props.open && "\n      position: relative;\n      opacity: 1;\n      visibility: visible;\n      overflow: auto;\n      max-height: 5000px;\n    ";
});

var ListItem = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  as: 'div',
  variant: 4,
  className: 'py-3 d-flex justify-content-between align-items-center'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  width: 100%;\n  flex: 1;\n  outline: none;\n  text-transform: none;\n  cursor: pointer;\n  transition: color 0.25s ease;\n  background: transparent;\n"])));
var ItemLabel = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  as: 'h5',
  variant: 4
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  overflow-wrap: break-word;\n  position: relative;\n  max-width: 90%;\n  letter-spacing: 0;\n  text-transform: capitalize;\n"])));

var IconWrapper = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & svg {\n    transform: rotate(0);\n    transition: transform 0.3s ease;\n    ", "\n  }\n"])), function (props) {
  return props.open && "\n        transform: rotate(180deg);\n      ";
});
//# sourceMappingURL=index.js.map