import classNames from "clsx";
import { mergeDeep } from "../../helpers/mergeDeep";
import { useTheme } from "../Flowbite/ThemeContext";
import { AccordionContent } from "./AccordionContent";
import { AccordionPanel } from "./AccordionPanel";
import { AccordionTitle } from "./AccordionTitle";
import { createMemo, mergeProps, splitProps, } from "solid-js";
import AccordionContext from "./AccordionContext";
import { createControlledProp } from "../../helpers/createControlledProp";
const defaultProps = {
    alwaysOpen: false,
    flush: false,
    collapseAll: false,
    theme: {},
};
const AccordionComponent = (p) => {
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "activeKey",
        "alwaysOpen",
        "arrowIcon",
        "children",
        "theme",
        "class",
        "defaultActiveKey",
        "collapseAll",
        "onSelect",
        "flush",
    ]);
    const [activeKey, onSelect] = createControlledProp(() => local.activeKey, () => local.defaultActiveKey, local.onSelect);
    const contextValue = {
        get activeEventKey() {
            return activeKey();
        },
        get alwaysOpen() {
            return local.alwaysOpen;
        },
        get onSelect() {
            return onSelect;
        },
        get flush() {
            return local.flush;
        },
        get collapseAll() {
            return local.collapseAll;
        },
    };
    const defaultTheme = useTheme();
    const theme = createMemo(() => mergeDeep(defaultTheme.theme.accordion.root, local.theme || {}));
    return (<AccordionContext.Provider value={contextValue}>
      <div class={classNames(theme().base, theme().flush[local.flush ? "on" : "off"], local.class)} data-testid="flowbite-accordion" {...props}>
        {local.children}
      </div>
    </AccordionContext.Provider>);
};
export const Accordion = Object.assign(AccordionComponent, {
    Panel: AccordionPanel,
    Title: AccordionTitle,
    Content: AccordionContent,
});