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 from 'react';
import { makeStyles, CircularProgress, useTheme, Typography, lighten } from '@material-ui/core';
import { StandardTitle } from './StandardTitle';
import { FluentIconButton } from '../../inputs/buttons/FluentIconButton';
import { FluentButton } from '../../inputs/buttons/FluentButton';
import { ChromeCloseIcon } from '@fluentui/react-icons';
import { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';
import clsx from 'clsx';
const useStyles = makeStyles((theme) => {
    var _a;
    return ({
        root: {
            display: 'flex',
            flexDirection: 'row',
            padding: theme.spacing(1),
            paddingLeft: 0,
            background: ((_a = theme === null || theme === void 0 ? void 0 : theme.getThemeData()) === null || _a === void 0 ? void 0 : _a.mode) === 'dark'
                ? theme.palette.grey[800]
                : theme.palette.common.white
        },
        title: {
            display: 'flex',
            flex: 1,
            alignItems: 'center',
            marginLeft: theme.spacing(1.5)
        },
        actionButton: {
            marginRight: theme.spacing(1),
            position: 'relative'
        },
        fabProgress: {
            position: 'absolute',
            top: 4,
            left: '35%',
            zIndex: 1
        }
    });
});
export const SidebarHeader = (props) => {
    const { title, onClose, buttonLabel, buttonProgress, buttonVariant = 'contained', buttonIcon = null, onSubmit, secondaryButtonLabel, secondaryButtonProgress, secondaryButtonVariant = 'contained', secondaryButtonIcon = '', secondaryOnSubmit = () => { }, additionalInputs, classes: classProps, hideCloseButton } = props, otherProps = __rest(props, ["title", "onClose", "buttonLabel", "buttonProgress", "buttonVariant", "buttonIcon", "onSubmit", "secondaryButtonLabel", "secondaryButtonProgress", "secondaryButtonVariant", "secondaryButtonIcon", "secondaryOnSubmit", "additionalInputs", "classes", "hideCloseButton"]);
    const classes = useStyles(props);
    const { root, actionButton } = classProps || {};
    const theme = useTheme();
    return (React.createElement("div", { className: clsx(classes.root, root) }, React.createElement("div", { className: classes.title }, !hideCloseButton && (React.createElement(FluentIconButton, { id: "udpRecord-SidebarHeader-ClosePanel", udprecordid: "udpRecord-SidebarHeader-ClosePanel", icon: ChromeCloseIcon, onClick: onClose, "aria-label": "Close Panel" })), React.createElement(StandardTitle, { className: classes.title }, title)), additionalInputs, secondaryButtonLabel && (React.createElement("div", { className: clsx(classes.actionButton, actionButton) }, React.createElement(FluentButton, Object.assign({ variant: secondaryButtonVariant, color: "secondary", onClick: secondaryOnSubmit, height: theme.spacing(5.25) }, otherProps), secondaryButtonProgress && (React.createElement(CircularProgress, { size: theme.spacing(3), color: "secondary", className: classes.fabProgress })), secondaryButtonIcon && (React.createElement(FluentIcon, { size: "small", component: secondaryButtonIcon, color: "primary", style: {
            marginRight: theme.spacing(1)
        } })), React.createElement(Typography, null, secondaryButtonLabel)))), buttonLabel && (React.createElement("div", { className: clsx(classes.actionButton, actionButton) }, React.createElement(FluentButton, Object.assign({ variant: buttonVariant, color: "secondary", onClick: onSubmit, height: theme.spacing(5.25) }, otherProps), buttonProgress && (React.createElement(CircularProgress, { size: theme.spacing(3), color: "secondary", className: classes.fabProgress })), buttonIcon && (React.createElement(FluentIcon, { size: "small", component: buttonIcon, color: "primary", style: {
            marginRight: theme.spacing(1)
        } })), React.createElement(Typography, null, buttonLabel))))));
};
//# sourceMappingURL=SidebarHeader.js.map