import { _ as __assign } from '../tslib.es6-faad35dc.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useState } from 'react';
import { styled } from '@mui/material/styles';
import { c as clsx } from '../clsx.m-6243b874.js';
import MuiBox from '@mui/material/Box';
import MuiAccordion from '@mui/material/Accordion';
import MuiAccordionSummary from '@mui/material/AccordionSummary';
import MuiAccordionDetails from '@mui/material/AccordionDetails';
import Icon from './Icon.js';
import Typography from './Typography.js';
import '../icons/ArrowLeft.js';
import '../icons/ArrowRight.js';
import '../icons/CloseCircle.js';
import '../icons/InfoCircle.js';
import '../icons/ErrorCircle.js';
import '../icons/Attention.js';
import '../icons/HelpCircle.js';
import '../icons/Document.js';
import '../icons/DocumentText.js';
import '../icons/Lock.js';
import '../icons/Delete.js';
import '../icons/Users.js';
import '../icons/Stakefish.js';
import '../icons/Sound.js';
import '../icons/Beacon.js';
import '../icons/TriangleRight.js';
import '../icons/TriangleLeft.js';
import '../icons/TriangleUp.js';
import '../icons/TriangleDown.js';
import '../icons/Sent.js';
import '../icons/Download.js';
import '../icons/Faster.js';
import '../icons/Slower.js';
import '../icons/Usb.js';
import '../icons/Key.js';
import '../icons/Edit.js';
import '../icons/Expand.js';
import '../icons/Collapse.js';
import '../icons/Success.js';
import '../icons/SuccessCircle.js';
import '../icons/Fail.js';
import '../icons/Desktop.js';
import '../icons/Mobile.js';
import '../icons/Loading.js';
import '../icons/Upload.js';
import '../icons/Check.js';
import '../icons/ChevronLeft.js';
import '../icons/ChevronRight.js';
import '../icons/Plus.js';
import '../icons/Minus.js';
import '../icons/Globe.js';
import '../icons/Link.js';
import '../icons/Copy.js';
import '../icons/Medium.js';
import '../icons/Twitter.js';
import '../icons/Telegram.js';
import '../icons/Eth.js';
import '../icons/Sort.js';
import '../icons/Close.js';
import '../icons/DollarSign.js';
import '../icons/Search.js';
import '../icons/Range.js';
import '../icons/Instagram.js';
import '../icons/LinkedIn.js';
import '../icons/Reddit.js';
import '../icons/YouTube.js';
import '../icons/Chrome.js';
import '../icons/CloudConnect.js';
import '../icons/Update.js';
import '../icons/Menu.js';
import '../icons/Settings.js';
import '../_commonjsHelpers-1789f0cf.js';
import '@mui/material/Typography';
import '../theme/typography.js';

var AccordionContentType;
(function (AccordionContentType) {
    AccordionContentType["Summary"] = "summary";
    AccordionContentType["Details"] = "details";
})(AccordionContentType || (AccordionContentType = {}));
var PREFIX = "Accordion";
var classes = {
    root: PREFIX + "-root",
    expanded: PREFIX + "-expanded",
    adjacentExpanded: PREFIX + "-adjacentExpanded"
};
var StyledBox = styled(MuiBox)(function (_a) {
    var _b;
    var theme = _a.theme;
    return (_b = {},
        _b["& ." + classes.root] = {
            paddingLeft: theme.spacing(8),
            paddingRight: theme.spacing(8),
            borderRadius: theme.borders.radius.xl1,
            "&:last-of-type": {
                "& .MuiAccordion-root": {
                    borderBottom: "3px solid " + theme.palette.gray[100]
                }
            },
            transition: theme.transitions.create(["padding", "background"])
        },
        _b["& ." + classes.expanded] = {
            paddingTop: theme.spacing(1.875),
            paddingBottom: theme.spacing(1.875),
            backgroundColor: theme.palette.gray[100],
            "&:last-of-type": {
                "& .MuiAccordion-root": {
                    borderBottom: "none"
                }
            },
            transition: theme.transitions.create(["padding", "background"])
        },
        _b["& ." + classes.adjacentExpanded] = {
            "& .MuiAccordion-root": {
                borderTop: "none"
            }
        },
        _b);
});
var AccordionBox = styled(MuiAccordion)(function () { return ({
    "&:before": {
        display: "none"
    },
    "&.Mui-expanded": {
        margin: "auto"
    }
}); });
var AccordionContent = function (_a) {
    var content = _a.content, type = _a.type;
    if (typeof content === "string") {
        return (jsx(Typography, { variant: type === AccordionContentType.Summary ? "subtitle3Bold" : "description", dangerouslySetInnerHTML: { __html: content } }, void 0));
    }
    return jsx(Fragment, { children: content }, void 0);
};
var AccordionSummary = styled(MuiAccordionSummary)(function (_a) {
    var theme = _a.theme;
    return ({
        backgroundColor: "transparent",
        padding: "1.625rem 0px",
        "& .MuiAccordionSummary-content": {
            margin: 0,
            "&.Mui-expanded": {
                margin: 0
            }
        },
        "& .MuiAccordionSummary-expandIconWrapper": {
            "&:hover": {
                "&.MuiIconButton-root .icon path": {
                    fill: theme.palette.icon.secondary
                }
            },
            "&.MuiIconButton-root": {
                padding: 0
            },
            "&.MuiIconButton-edgeEnd": {
                marginRight: 0
            }
        }
    });
});
var AccordionDetails = styled(MuiAccordionDetails)(function () { return ({
    padding: "0 0 2.125rem 0"
}); });
var Accordion = function (_a) {
    var entries = _a.entries;
    var _b = useState(false), expanded = _b[0], setExpanded = _b[1];
    var _c = useState(false), expandedIndex = _c[0], setExpandedIndex = _c[1];
    var handleChange = function (panel, index) { return function (event, newExpanded) {
        setExpanded(newExpanded ? panel : false);
        setExpandedIndex(newExpanded ? index : false);
    }; };
    return (jsx(StyledBox, { children: entries.map(function (_a, index) {
            var id = _a.id, summary = _a.summary, details = _a.details;
            var className = clsx([
                classes.root,
                expanded === id && classes.expanded,
                expandedIndex === index - 1 && classes.adjacentExpanded
            ]);
            return (jsx(MuiBox, __assign({ className: className }, { children: jsxs(AccordionBox, __assign({ square: true, expanded: expanded === id, onChange: handleChange(id, index) }, { children: [jsx(AccordionSummary, __assign({ "aria-controls": id + "d-content", id: id + "d-header", expandIcon: jsx(Icon, { iconKey: "triangleDown", size: "sm", color: "secondary" }, void 0) }, { children: jsx(AccordionContent, { content: summary, type: AccordionContentType.Summary }, void 0) }), void 0), jsx(AccordionDetails, { children: jsx(AccordionContent, { content: details, type: AccordionContentType.Details }, void 0) }, void 0)] }), void 0) }), index));
        }) }, void 0));
};

export { Accordion as default };
