import React from 'react';
import { makeStyles, Card, Collapse, Divider } from '@material-ui/core';
import { FluentIconButton } from '../inputs/buttons/FluentIconButton';
import { ChevronDownIcon, ChevronUpIcon } from '@fluentui/react-icons';
import clsx from 'clsx';
import { SubHeaderActionsTarget } from '../../utilities/utilityBar/SubHeaderAction';
import { InquiryHeaderTitleTarget } from '../../utilities/utilityBar/InquiryHeaderTitle';
import { InquiryHeaderControlTarget } from '../../utilities/utilityBar/InquiryHeaderControl';
import { InquiryHeaderSecondaryTarget } from '../../utilities/utilityBar/InquiryHeaderSecondary';
import { InquiryHeaderSecondaryAlertTarget } from '../../utilities/utilityBar/InquiryHeaderSecondaryAlert';
import { useActionState } from '../../hooks/useActions';
import { useShellStore } from '../../stores/shellStore';
const useStyles = makeStyles((theme) => ({
    root: {},
    bar: {
        display: 'flex',
        flexDirection: 'row'
    },
    gutters: {
        paddingLeft: theme.spacing(2)
    },
    content: {
        flex: 1,
        width: '100%'
    },
    collapsed: {
        height: 0,
        transition: theme.transitions.create('height', {
            easing: theme.transitions.easing.easeOut,
            duration: theme.transitions.duration.leavingScreen
        })
    },
    expanded: {
        transition: theme.transitions.create('height', {
            easing: theme.transitions.easing.easeIn,
            duration: theme.transitions.duration.enteringScreen
        })
    },
    open: {
        display: 'flex',
        justifyContent: 'flex-end'
    },
    toggleButton: {
        position: 'absolute',
        right: theme.spacing(1),
        top: theme.spacing(1)
    },
    cardRoot: {
        '&:last-child': {
            paddingBottom: theme.spacing(1)
        }
    },
    chevronButtonOpen: {
        display: 'flex',
        justifyContent: 'center',
        marginLeft: 25,
        zIndex: theme.zIndex.appBar
    },
    chevronButtonClosed: {
        position: 'absolute',
        left: '50%',
        top: 11,
        zIndex: theme.zIndex.appBar
    },
    chevronButtonClosedLower: {
        display: 'flex',
        justifyContent: 'center',
        marginLeft: 25,
        zIndex: theme.zIndex.appBar
    },
    inquiryHeader: {
        display: 'flex',
        flexDirection: 'column'
        // alignItems: 'center'
    }
}), { name: 'UtilityBar' });
export const UtilityBar = (props) => {
    const classes = useStyles(props);
    // const { expanded = true, gutters = true, className } = props
    const { className, gutters = true, expander, toggleOne, toggleTwo, closePrimary = false, closeSecondary = false, expanded = true, expandedSecondary, setExpanded, setExpandedSecondary } = props;
    const actionState = useActionState();
    const { pageSplitScreen } = actionState || {};
    const shaHasChildren = useShellStore((state) => state.subHeaderActionHasChildren);
    return (React.createElement("div", { className: clsx(classes.bar, gutters && classes.gutters, className) }, React.createElement("div", { className: classes.content, style: { zIndex: (pageSplitScreen === null || pageSplitScreen === void 0 ? void 0 : pageSplitScreen.open) ? 1100 : '' } }, !expander && (React.createElement(Card, { variant: `${shaHasChildren ? 'outlined' : 'elevation'}` }, React.createElement(SubHeaderActionsTarget, { className: classes.actions }))), expander && (React.createElement("div", null, React.createElement(Card, { className: classes.card, square: true }, React.createElement("div", null, React.createElement(InquiryHeaderTitleTarget, null), React.createElement(Collapse, { in: closePrimary, timeout: "auto" }, React.createElement(SubHeaderActionsTarget, { className: classes.actions })), toggleOne && (React.createElement("div", { className: clsx(expanded
            ? classes.chevronButtonOpen
            : classes.chevronButtonClosed) }, React.createElement(FluentIconButton
    // onClick={() => setExpanded(!expanded)}
    , { 
        // onClick={() => setExpanded(!expanded)}
        onClick: setExpanded, icon: expanded ? ChevronUpIcon : ChevronDownIcon, className: classes.icon })))), React.createElement(Divider, null), React.createElement(Collapse, { in: closeSecondary, timeout: "auto" }, React.createElement("div", { className: classes.inquiryHeader }, React.createElement(InquiryHeaderSecondaryTarget, { className: classes.actions }), React.createElement(InquiryHeaderSecondaryAlertTarget, { className: classes.actions }))), React.createElement(InquiryHeaderControlTarget, null), toggleTwo && (React.createElement("div", { className: clsx(expandedSecondary
            ? classes.chevronButtonOpen
            : classes.chevronButtonClosedLower) }, React.createElement(FluentIconButton
    // onClick={() => setExpandedSecondary(!expandedSecondary)}
    , { 
        // onClick={() => setExpandedSecondary(!expandedSecondary)}
        onClick: setExpandedSecondary, icon: expandedSecondary ? ChevronUpIcon : ChevronDownIcon, className: classes.icon })))))))));
};
//# sourceMappingURL=UtilityBar.js.map