import React, { Children, forwardRef, useState } from "react";
import { cx } from "../../utils";
import { base } from "./Accordion.styles";
import { classes } from "./Accordion.tokens";
import { base as viewCSS } from "./variations/_view/base";
import { base as sizeCSS } from "./variations/_size/base";
import { getChildren } from "./utils";
export const accordionRoot = (Root)=>/*#__PURE__*/ forwardRef(({ size, view, stretching = 'filled', defaultActiveEventKey = [], children, disabled, className, singleActive, onChange, ...rest }, outerRootRef)=>{
        const stretchingClass = classes[`${stretching}Stretching`];
        const [activeIndex, setActiveIndex] = useState(defaultActiveEventKey);
        const updateValue = (index, value)=>{
            if (onChange) {
                onChange(index, value);
            }
            if (singleActive) {
                if (value) {
                    setActiveIndex([
                        index
                    ]);
                } else {
                    setActiveIndex([]);
                }
            } else if (value) {
                setActiveIndex([
                    index,
                    ...activeIndex
                ]);
            } else {
                const updatedActiveIndex = activeIndex.filter((i)=>i !== index);
                setActiveIndex(updatedActiveIndex);
            }
        };
        const childrenArray = Children.toArray(children);
        return /*#__PURE__*/ React.createElement(Root, {
            ref: outerRootRef,
            size: size,
            view: view,
            className: cx(stretchingClass, classes.accordionRoot, className),
            ...rest
        }, getChildren(childrenArray, activeIndex, view, disabled, updateValue));
    });
export const accordionConfig = {
    name: 'Accordion',
    tag: 'div',
    layout: accordionRoot,
    base,
    variations: {
        view: {
            css: viewCSS
        },
        size: {
            css: sizeCSS
        }
    },
    defaults: {
        view: 'default',
        size: 'm'
    }
};
