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