import { ButtonBase, Collapse, Tooltip, Typography, lighten, makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import React, { useCallback } from 'react';
import { FluentIcon } from '../../utilities/iconLibrary/FluentIcon';
import { IconButtonWithTooltip } from '../inputs/buttons/IconButtonWithToolTip';
import { ChevronUpIcon } from '@fluentui/react-icons';
import { FluentIconButton } from '../inputs/buttons/FluentIconButton';
import { getIconFromName } from '../../utilities/tree/TreeUtilities';
import { StatusChip } from '../dataDisplay/status/StatusChip';
const useStyles = makeStyles((theme) => ({
    root: {
        width: '100%',
        height: '100%'
    },
    rootBorder: {
        borderStyle: 'solid',
        borderColor: (props) => {
            var _a;
            return (_a = theme.palette[props === null || props === void 0 ? void 0 : props.color]) === null || _a === void 0 ? void 0 : _a.main;
        },
        borderWidth: '1px 1px 1px 6px'
    },
    headerWrapper: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: (props) => {
            var _a;
            return (props === null || props === void 0 ? void 0 : props.simpleAccordion) && (props === null || props === void 0 ? void 0 : props.color) && (props === null || props === void 0 ? void 0 : props.color) !== 'default'
                ? (props === null || props === void 0 ? void 0 : props.color) === 'paper'
                    ? theme.palette.background.paper
                    : lighten((_a = theme.palette[props === null || props === void 0 ? void 0 : props.color]) === null || _a === void 0 ? void 0 : _a.light, 0.8)
                : theme.palette.background.default;
        },
        overflow: 'hidden',
        width: (props) => {
            var _a;
            return (_a = props === null || props === void 0 ? void 0 : props.headerWidth) !== null && _a !== void 0 ? _a : '100%';
        }
    },
    secondaryButtonsWrapper: {
        display: 'flex',
        gap: theme.spacing(2),
        borderRadius: theme.spacing(2),
        backgroundColor: 'white',
        padding: `2px ${theme.spacing(1)}px`,
        width: 'fit-content'
    },
    primaryButtonWrapper: {
        minWidth: '68px',
        maxWidth: (props) => props === null || props === void 0 ? void 0 : props.primaryActionMaxWidth,
        height: 'auto',
        color: 'white',
        backgroundColor: (props) => {
            var _a;
            return (_a = theme.palette[props === null || props === void 0 ? void 0 : props.color]) === null || _a === void 0 ? void 0 : _a.main;
        },
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf: 'normal'
    },
    headerColor: {
        backgroundColor: (props) => {
            var _a;
            return (props === null || props === void 0 ? void 0 : props.color) !== 'default' &&
                (props === null || props === void 0 ? void 0 : props.color) !== 'paper' &&
                lighten((_a = theme.palette[props === null || props === void 0 ? void 0 : props.color]) === null || _a === void 0 ? void 0 : _a.light, 0.85);
        }
    },
    buttonWrapper: {
        display: 'flex',
        gap: theme.spacing(0.5)
    },
    titleWrapper: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        flexGrow: 2,
        margin: (props) => (props.removeHeaderMargin ? '0px' : theme.spacing(0.8)),
        color: theme.palette.text.primary
    },
    closeButtonWrapper: {
        display: 'flex',
        justifyContent: 'flex-end',
        marginTop: theme.spacing(1)
    },
    unexpandedIconButton: {
        width: '68px',
        height: '40px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf: 'normal',
        borderTop: `solid 1px lightgrey`,
        borderLeft: `solid 1px lightgrey`,
        overflow: 'hidden',
        border: (props) => (props === null || props === void 0 ? void 0 : props.removeBorder) && '0px'
    },
    rightIconButton: {
        backgroundColor: 'white',
        padding: theme.spacing(1),
        borderRadius: '50%'
    },
    primaryActionLabel: {
        marginRight: theme.spacing(0.5),
        marginLeft: theme.spacing(0.5)
    },
    expand: {
        transform: 'rotate(0deg)',
        marginLeft: 'auto',
        marginRight: theme.spacing(1),
        transition: theme.transitions.create('transform', {
            duration: theme.transitions.duration.shortest
        })
    },
    expandOpen: {
        transform: 'rotate(180deg)'
    },
    titleStatusWrapper: {
        display: 'flex',
        alignItems: 'center',
        gap: theme.spacing(1),
    }
}));
export const Accordion = (props) => {
    const { title, subtitle, subtitleVariant, status, statusIcon, statusLabel, secondaryIconButtons, overriddenSecondaryContainer, rightIcon, rightIconAction, rightIconTooltip, disableRightIconButton = false, primaryActionIcon, primaryActionLabel, primaryAction, primaryActionMaxWidth, disablePrimaryActionButton = false, color = 'info', children, expand, setExpand, additionalEvent, hideCloseButton = false, hideRightIconButton = false, hidePrimaryAction = false, noWrapTitle = false, simpleAccordion = false, recordId = 0, removeBorder = false, headerWidth, removeHeaderMargin, titleVariant = 'subtitle2', chevronIconSize = 'medium', unmountOnExit = true } = props;
    const classes = useStyles({
        color,
        primaryActionMaxWidth,
        simpleAccordion,
        headerWidth,
        removeHeaderMargin,
        removeBorder,
    });
    const handleOnClickAccordion = useCallback(() => {
        if (setExpand) {
            setExpand(!expand);
        }
        if (additionalEvent) {
            additionalEvent();
        }
    }, [additionalEvent, expand, setExpand]);
    return (React.createElement("div", { className: clsx(classes.root, {
            [classes.rootBorder]: !simpleAccordion & !removeBorder
        }) }, React.createElement("div", { className: clsx(classes.headerWrapper, {
            [classes.headerColor]: simpleAccordion ? false : expand
        }), onClick: handleOnClickAccordion }, React.createElement("div", { className: classes.titleWrapper }, React.createElement("div", null, React.createElement("div", { className: classes.titleStatusWrapper }, React.createElement(Typography, { variant: titleVariant, noWrap: noWrapTitle }, title), statusLabel && React.createElement(StatusChip, { status: status !== null && status !== void 0 ? status : color, label: statusLabel, icon: statusIcon })), subtitle && (React.createElement(Typography, { variant: subtitleVariant, noWrap: noWrapTitle }, subtitle)), overriddenSecondaryContainer ? ({ overriddenSecondaryContainer }) : (React.createElement("div", null, (secondaryIconButtons === null || secondaryIconButtons === void 0 ? void 0 : secondaryIconButtons.length) > 0 && (React.createElement("div", { className: classes.secondaryButtonsWrapper }, secondaryIconButtons === null || secondaryIconButtons === void 0 ? void 0 : secondaryIconButtons.map((item) => (React.createElement("div", { className: classes.buttonWrapper }, React.createElement(IconButtonWithTooltip, Object.assign({}, item, { title: item === null || item === void 0 ? void 0 : item.title, icon: item.icon, onClick: (event) => {
            event.stopPropagation();
            item.onClick();
        }, size: "small", id: `udpRecord-Accordion-${item === null || item === void 0 ? void 0 : item.title}-${recordId}`, udprecordid: `udpRecord-Accordion-${item === null || item === void 0 ? void 0 : item.title}-${recordId}` })), (item === null || item === void 0 ? void 0 : item.value) && React.createElement(Typography, null, item === null || item === void 0 ? void 0 : item.value))))))))), !hideRightIconButton && !simpleAccordion && (React.createElement("div", null, React.createElement(IconButtonWithTooltip, { title: rightIconTooltip, icon: rightIcon, onClick: (event) => {
            event.stopPropagation();
            rightIconAction();
        }, className: classes.rightIconButton, size: "small", disabled: disableRightIconButton, id: `udpRecord-Accordion-RightButton-${recordId}`, udprecordid: `udpRecord-Accordion-RightButton-${recordId}` })))), !hidePrimaryAction && !simpleAccordion && (React.createElement("div", { className: classes.primaryButtonWrapper }, primaryActionIcon ? (React.createElement(Tooltip, { title: primaryActionLabel }, React.createElement(ButtonBase, { onClick: (event) => {
            event.stopPropagation();
            primaryAction();
        }, className: classes.primaryButtonWrapper, disabled: disablePrimaryActionButton, id: `udpRecord-Accordion-ButtonBase-${recordId}`, udprecordid: `udpRecord-Accordion-ButtonBase-${recordId}` }, React.createElement(FluentIcon, { component: primaryActionIcon })))) : (React.createElement(ButtonBase, { onClick: primaryAction, className: classes.primaryButtonWrapper, disabled: disablePrimaryActionButton }, React.createElement(Typography, { className: classes.primaryActionLabel }, primaryActionLabel))))), simpleAccordion && (React.createElement(FluentIconButton, { icon: getIconFromName('ChevronDownIcon'), onClick: handleOnClickAccordion, className: clsx(classes.expand, {
            [classes.expandOpen]: expand
        }), size: chevronIconSize, disabled: disableRightIconButton, id: `udpRecord-Accordion-ExpandButton-${recordId}`, udprecordid: `udpRecord-Accordion-ExpandButton-${recordId}` }))), React.createElement(Collapse, { in: expand, timeout: "auto", unmountOnExit: unmountOnExit }, React.createElement("div", null, React.createElement("div", null, children), !hideCloseButton && !simpleAccordion && (React.createElement("div", { className: classes.closeButtonWrapper }, React.createElement(ButtonBase, { onClick: () => {
            if (setExpand) {
                setExpand(false);
            }
        }, className: classes.unexpandedIconButton, id: `udpRecord-Accordion-CloseButton-${recordId}`, udprecordid: `udpRecord-Accordion-CloseButton-${recordId}` }, React.createElement(FluentIcon, { component: ChevronUpIcon }))))))));
};
//# sourceMappingURL=Accordion.js.map