import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core';
import { FluentIconButton } from '../inputs/buttons/FluentIconButton';
import { ChevronRightIcon, ChevronLeftIcon } from '@fluentui/react-icons';
export const SapFlexibleTemplate = ({ left, center, right }) => {
    const [columns, setColumns] = useState({
        columnLeft: true,
        columnCenter: true,
        columnRight: true
    });
    const [columnPercent, setColumnPercent] = useState({
        columnLeft: '25%',
        columnCenter: '50%',
        columnRight: '25%'
    });
    const useStyles = makeStyles((theme) => ({
        root: {
            display: 'flex',
            flexDirection: 'row'
        },
        columnLeft: {
            display: 'flex',
            flex: columnPercent.columnLeft,
            height: '100vh'
        },
        columnCenter: {
            flex: columnPercent.columnCenter,
            height: '100vh'
        },
        columnRight: {
            display: 'flex',
            flex: columnPercent.columnRight,
            height: '100vh'
        },
        fillContent: {
            flex: 1
        }
    }));
    const classes = useStyles();
    const handleToggleColumn = (columnType) => {
        setColumns(Object.assign(Object.assign({}, columns), { columnCenter: !columns.columnCenter }));
        if (columnType === 'columnLeft') {
            setColumnPercent(Object.assign(Object.assign({}, columnPercent), { columnLeft: '75%' }));
            if (columnPercent.columnLeft === '75%') {
                setColumnPercent(Object.assign(Object.assign({}, columnPercent), { columnLeft: '25%' }));
            }
        }
        else {
            setColumnPercent(Object.assign(Object.assign({}, columnPercent), { columnRight: '75%' }));
            if (columnPercent.columnRight === '75%') {
                setColumnPercent(Object.assign(Object.assign({}, columnPercent), { columnRight: '25%' }));
            }
        }
    };
    return (React.createElement("div", { className: classes.root }, columns.columnLeft && (React.createElement("div", { className: classes.columnLeft }, React.createElement("div", { className: classes.fillContent }, left, " "), React.createElement("div", { className: classes.toggle }, React.createElement(FluentIconButton, { "aria-label": columnPercent.columnLeft === '25%'
            ? 'Expand column'
            : 'Collapse column', color: "primary", icon: columnPercent.columnLeft === '25%'
            ? ChevronRightIcon
            : ChevronLeftIcon, onClick: () => handleToggleColumn('columnLeft') })))), columns.columnCenter && (React.createElement("div", { className: classes.columnCenter }, React.createElement("div", null, " ", center, " "))), columns.columnRight && (React.createElement("div", { className: classes.columnRight }, React.createElement("div", { className: classes.toggle }, React.createElement(FluentIconButton, { "aria-label": columnPercent.columnRight === '25%'
            ? 'Expand column'
            : 'Collapse column', color: "primary", icon: columnPercent.columnRight === '25%'
            ? ChevronLeftIcon
            : ChevronRightIcon, onClick: () => handleToggleColumn('columnRight') })), React.createElement("div", { className: classes.fillContent }, " ", right, " ")))));
};
//# sourceMappingURL=SapFlexibleTemplate.js.map