CollapsibleSection.tsx

import { ChevronDown } from "@styled-icons/boxicons-regular";

import { State, store } from "../../redux";
import { Action } from "../../redux/reducers";

import Details from "../ui/Details";

import { Children } from "../../types/Preact";

interface Props {
    id: string;
    defaultValue: boolean;

    sticky?: boolean;
    large?: boolean;

    summary: Children;
    children: Children;
}

export default function CollapsibleSection({
    id,
    defaultValue,
    summary,
    children,
    ...detailsProps
}: Props) {
    const state: State = store.getState();

    function setState(state: boolean) {
        if (state === defaultValue) {
            store.dispatch({
                type: "SECTION_TOGGLE_UNSET",
                id,
            } as Action);
        } else {
            store.dispatch({
                type: "SECTION_TOGGLE_SET",
                id,
                state,
            } as Action);
        }
    }

    return (
        <Details
            open={state.sectionToggle[id] ?? defaultValue}
            onToggle={(e) => setState(e.currentTarget.open)}
            {...detailsProps}>
            <summary>
                <div class="padding">
                    <ChevronDown size={20} />
                    {summary}
                </div>
            </summary>
            {children}
        </Details>
    );
}