/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { IconButton, useTheme } from '@fluentui/react';
import { memo, useMemo } from 'react';
import { HistoryIcon } from './CustomIcons.js';
import { Aside, AsideHeader, Title, WorkflowContainer } from './HistoryPanel.styles.js';
export const HistoryPanel = /*#__PURE__*/ memo(function HistoryPanel({ toggleCollapsed , title ='History' , showStepCount , numSteps , titleStyle , children ,  }) {
    const closeIconProps = useCloseIconProps();
    return /*#__PURE__*/ _jsxs(Aside, {
        children: [
            /*#__PURE__*/ _jsxs(AsideHeader, {
                children: [
                    /*#__PURE__*/ _jsx(HistoryIcon, {}),
                    /*#__PURE__*/ _jsxs(Title, {
                        style: titleStyle,
                        children: [
                            title,
                            " ",
                            showStepCount ? `(${numSteps})` : null,
                            /*#__PURE__*/ _jsx(IconButton, {
                                iconProps: closeIconProps,
                                onClick: toggleCollapsed,
                                ariaLabel: "Close"
                            })
                        ]
                    })
                ]
            }),
            /*#__PURE__*/ _jsx(WorkflowContainer, {
                children: children
            })
        ]
    });
});
function useCloseIconProps() {
    const theme = useTheme();
    return useMemo(()=>({
            iconName: 'Cancel',
            styles: {
                root: {
                    color: theme.palette.neutralPrimary
                }
            }
        }), [
        theme
    ]);
}
