import React, { Fragment } from 'react';
import { makeStyles, Typography } from '@material-ui/core';
import { FluentIconButton } from '../../inputs/buttons/FluentIconButton';
import clsx from 'clsx';
import { CalculatorMultiplyIcon, TimerIcon, PaddingRightIcon, PaddingLeftIcon } from '@fluentui/react-icons';
const useStyles = makeStyles((theme) => ({
    root: {
        marginTop: 32
    },
    nestedWrapper: {
        display: 'grid'
    },
    columnAdornment: {
        borderLeft: `4px solid ${theme.palette.secondary.main}`,
        borderTop: `4px solid ${theme.palette.secondary.main}`
    },
    detailHeader: {
        padding: theme.spacing(1),
        color: 'white',
        background: theme.palette.grey.dark
    },
    detailHeaderActive: {
        background: theme.palette.secondary.main
    },
    columnHeaderWrapper: {
        display: 'flex'
    },
    columnTitle: {
        flex: 1,
        display: 'flex',
        paddingTop: theme.spacing(1)
    },
    icon: {
        color: theme.palette.common.white
    },
    expandIcon: {
        marginLeft: theme.spacing(2),
        marginTop: theme.spacing(-1)
    }
}));
export const NestParent = ({ parentTitle, children, showDetail }) => {
    const classes = useStyles();
    return (React.createElement("div", { className: classes.root }, showDetail && (React.createElement("div", { className: classes.detailHeader }, React.createElement(Typography, { variant: "subtitle2" }, " ", parentTitle, " "))), children));
};
export const NestWrapper = ({ children, columnFr }) => {
    const classes = useStyles();
    return (React.createElement("div", { className: classes.nestedWrapper, style: { gridTemplateColumns: `1fr ${columnFr}fr` } }, children));
};
export const toggleHeader = (type, setShowDetail, setColumnFr
// setSplitGrid
) => {
    if (type === 'open') {
        setShowDetail(true);
        setColumnFr(4);
        // setSplitGrid(true)
    }
    else {
        setShowDetail(false);
        setColumnFr(0);
    }
};
export const NestedGrid = ({ children, setShowDetail, setColumnFr, 
// setSplitGrid,
columnFr, childTitle, showDetail }) => {
    const classes = useStyles();
    const toggleHeader = (type) => {
        if (type === 'open') {
            setShowDetail(true);
            setColumnFr(4);
            // setSplitGrid(true)
        }
        else {
            setShowDetail(false);
            setColumnFr(0);
        }
    };
    const toggleWide = () => {
        if (columnFr === 4) {
            setColumnFr(1);
        }
        else {
            setColumnFr(4);
        }
    };
    return (React.createElement(Fragment, null, showDetail && (React.createElement("div", { className: classes.columnAdornment }, React.createElement("div", { className: clsx(classes.detailHeader, classes.detailHeaderActive) }, React.createElement("div", { className: classes.columnHeaderWrapper }, React.createElement("div", { className: classes.columnTitle }, React.createElement(TimerIcon, { style: { marginRight: 8 } }), React.createElement(Typography, { variant: "subtitle2" }, childTitle), React.createElement("div", null, React.createElement(FluentIconButton, { className: clsx(classes.icon, classes.expandIcon), icon: columnFr === 4 ? PaddingRightIcon : PaddingLeftIcon, onClick: toggleWide }))), React.createElement("div", null, React.createElement(FluentIconButton, { style: { color: 'white', marginRight: 8 }, icon: CalculatorMultiplyIcon, onClick: () => toggleHeader('close') })))), children))));
};
//# sourceMappingURL=NestedGrid.js.map