'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var roundness = require('../../../../utils/roundness.js');
var Accordion_tokens = require('../../Accordion.tokens.js');
var index = require('../../../../utils/index.js');
var AccordionItem_styles = require('./AccordionItem.styles.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var _excluded = ["value", "contentRight", "contentLeft", "title", "pin", "children", "type", "index", "className", "style", "eventKey", "disabled", "alignWithTitle", "opened", "view", "onChange", "onClick", "titleProps", "bodyProps"];
var AccordionItem = /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
  var _ref2;
  var value = _ref.value,
    contentRight = _ref.contentRight,
    contentLeft = _ref.contentLeft,
    title = _ref.title,
    _ref$pin = _ref.pin,
    pin = _ref$pin === void 0 ? 'square-square' : _ref$pin,
    children = _ref.children,
    _ref$type = _ref.type,
    type = _ref$type === void 0 ? 'sign' : _ref$type,
    index$1 = _ref.index,
    className = _ref.className,
    style = _ref.style,
    eventKey = _ref.eventKey,
    disabled = _ref.disabled,
    _ref$alignWithTitle = _ref.alignWithTitle,
    alignWithTitle = _ref$alignWithTitle === void 0 ? true : _ref$alignWithTitle,
    opened = _ref.opened,
    view = _ref.view,
    onChange = _ref.onChange,
    onClick = _ref.onClick,
    titleProps = _ref.titleProps,
    bodyProps = _ref.bodyProps,
    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
  var key = (_ref2 = eventKey !== null && eventKey !== void 0 ? eventKey : index$1) !== null && _ref2 !== void 0 ? _ref2 : 0;
  var _useState = React.useState(),
    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
    leftPadding = _useState2[0],
    setLeftPadding = _useState2[1];
  var handleOpen = function handleOpen() {
    if (disabled) {
      return;
    }
    if (onChange) {
      onChange(key, !value);
    }
    if (onClick) {
      onClick(key, !value);
    }
  };
  var leftContentRef = React.useRef(null);
  React.useEffect(function () {
    var _leftContentRef$curre, _leftContentRef$curre2;
    var leftContentWidth = (_leftContentRef$curre = leftContentRef === null || leftContentRef === void 0 || (_leftContentRef$curre2 = leftContentRef.current) === null || _leftContentRef$curre2 === void 0 ? void 0 : _leftContentRef$curre2.offsetWidth) !== null && _leftContentRef$curre !== void 0 ? _leftContentRef$curre : 0;
    var leftPaddingBody = leftContentWidth && (alignWithTitle || view === 'clear') ? "calc(".concat(leftContentWidth, "px + var(").concat(Accordion_tokens.tokens.accordionItemGap, "))") : 0;
    setLeftPadding(leftPaddingBody);
  }, [value, type, leftContentRef, setLeftPadding]);
  var openedBodyClass = (opened !== null && opened !== void 0 ? opened : value) ? Accordion_tokens.classes.accordionItemShowBody : undefined;
  var StyledAnimationPlus = function StyledAnimationPlus() {
    return /*#__PURE__*/React__default.default.createElement(AccordionItem_styles.StyledPlus, null, /*#__PURE__*/React__default.default.createElement(AccordionItem_styles.StyledMinus, {
      size: "xs",
      color: "inherit",
      sizeCustomProperty: Accordion_tokens.tokens.accordionItemIconSize
    }), /*#__PURE__*/React__default.default.createElement(AccordionItem_styles.StyledMinus, {
      size: "xs",
      color: "inherit",
      className: openedBodyClass !== null && openedBodyClass !== void 0 ? openedBodyClass : Accordion_tokens.classes.accordionPlusAnimationElement,
      sizeCustomProperty: Accordion_tokens.tokens.accordionItemIconSize
    }));
  };
  var accordionBorderRadius = roundness.convertRoundnessMatrix(pin, "var(".concat(Accordion_tokens.tokens.accordionItemViewBorderRadius, ", var(").concat(Accordion_tokens.tokens.accordionItemBorderRadius, "))"), '1.5rem');
  var openedClass = (opened !== null && opened !== void 0 ? opened : value) ? Accordion_tokens.classes.accordionItemOpened : '';
  var disabledClass = disabled ? Accordion_tokens.classes.accordionDisabled : '';
  var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ? /*#__PURE__*/React__default.default.createElement(AccordionItem_styles.StyledArrow, {
    size: "xs",
    color: "inherit",
    sizeCustomProperty: Accordion_tokens.tokens.accordionItemIconSize
  }) : undefined;
  var leftContentRotate = type === 'arrow' && (opened !== null && opened !== void 0 ? opened : value) ? Accordion_tokens.classes.accordionItemShowBody : undefined;
  var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React__default.default.createElement(StyledAnimationPlus, null) : undefined;
  var rightContentRotate = type === 'sign' && (opened !== null && opened !== void 0 ? opened : value) ? Accordion_tokens.classes.accordionItemShowBody : undefined;
  return /*#__PURE__*/React__default.default.createElement(AccordionItem_styles.StyledAccordionItem, _rollupPluginBabelHelpers.extends({
    className: index.cx(Accordion_tokens.classes.accordionItem, className, openedClass, disabledClass),
    key: key,
    ref: outerRef,
    style: _rollupPluginBabelHelpers.objectSpread2({
      borderRadius: accordionBorderRadius
    }, style)
  }, rest), /*#__PURE__*/React__default.default.createElement(AccordionItem_styles.StyledAccordionHeader, {
    role: "tab",
    onKeyDown: function onKeyDown(e) {
      if (e.key === 'Enter') {
        handleOpen();
      }
    },
    tabIndex: 0,
    onClick: handleOpen,
    "aria-expanded": opened !== null && opened !== void 0 ? opened : value,
    "aria-controls": "accordion-item-section".concat(key),
    id: "accordion-item-".concat(key),
    style: _rollupPluginBabelHelpers.defineProperty({}, Accordion_tokens.privateTokens.calculatedBorderRadius, accordionBorderRadius)
  }, /*#__PURE__*/React__default.default.createElement(AccordionItem_styles.StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/React__default.default.createElement(AccordionItem_styles.StyledAccordionContentLeft, {
    ref: leftContentRef,
    className: leftContentRotate
  }, leftContent), /*#__PURE__*/React__default.default.createElement(AccordionItem_styles.StyledAccordionTitle, titleProps, title)), contentRight || rightContent && /*#__PURE__*/React__default.default.createElement(AccordionItem_styles.StyledAccordionContentRight, {
    className: rightContentRotate
  }, rightContent && rightContent)), /*#__PURE__*/React__default.default.createElement(AccordionItem_styles.StyledAccordionBodyAnimate, _rollupPluginBabelHelpers.extends({
    "aria-labelledby": "accordion-item-".concat(key),
    "aria-hidden": !(opened !== null && opened !== void 0 ? opened : value),
    id: "accordion-item-section".concat(key),
    className: index.cx(openedBodyClass),
    style: {
      paddingLeft: "".concat(leftPadding)
    }
  }, bodyProps), /*#__PURE__*/React__default.default.createElement(AccordionItem_styles.StyledAccordionBody, {
    className: Accordion_tokens.classes.accordionItemBody
  }, children)));
});

exports.AccordionItem = AccordionItem;
