var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useState } from 'react';
import { lighten, makeStyles } from '@material-ui/core';
import MuiExpansionPanel from '@material-ui/core/ExpansionPanel';
import MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import { ExpanderItem } from './ExpanderItem';
const useStyles = makeStyles((theme) => ({
    rootPanel: {
        boxShadow: 'none',
        padding: 0,
        minWidth: 300,
        '&:not(:last-child)': {
            borderBottom: 0
        },
        '&$expanded': {
            margin: 'auto'
        }
    },
    expanded: {
        minHeight: 40
    },
    root: {
        background: (props) => props.accent
            ? theme.palette.primary.main
            : lighten(theme.palette.primary.light, 0.4),
        color: (props) => props.accent && theme.palette.common.white,
        marginBottom: -1,
        minHeight: 40,
        '&$expanded': {
            minHeight: 40,
            height: 20,
            paddingTop: 25,
            backgroundColor: (props) => props.accent
                ? theme.palette.primary.main
                : lighten(theme.palette.primary.light, 0.7)
        }
    },
    content: {
        '&$expanded': {
            margin: '12px 0'
        }
    },
    detailsRoot: {
        padding: 0,
        flexDirection: (props) => (props.single ? 'column' : 'row')
    }
}));
export const Block = (props) => {
    const [expanded, setExpanded] = useState('panel1');
    const classes = useStyles(props);
    const { label, children, number, id } = props, otherProps = __rest(props, ["label", "children", "number", "id"]);
    const handleChange = (panel) => (event, newExpanded) => {
        setExpanded(newExpanded ? panel : false);
    };
    return (React.createElement(MuiExpansionPanel, Object.assign({ classes: { root: classes.rootPanel } }, otherProps, { square: true, expanded: expanded === `panel${number}`, onChange: handleChange(`panel${number}`), id: id }), React.createElement(MuiExpansionPanelSummary, { classes: { root: classes.root, expanded: classes.expanded }, "aria-controls": "panel3d-content" }, React.createElement(ExpanderItem, { label: label, expanded: expanded === `panel${number}` })), React.createElement(MuiExpansionPanelDetails, { classes: { root: classes.detailsRoot } }, children)));
};
//# sourceMappingURL=Expander.js.map