import * as React from 'react';
import Panel from '../../../../components/Panel';
import { ButtonClose } from '../../Buttons/ButtonClose';
import { ButtonConfigure } from '../../Buttons/ButtonConfigure';
import { ButtonMinimise } from '../../Buttons/ButtonMinimise';
import { Flex } from 'rebass';
import join from '../../../../components/utils/join';
import { ButtonMaximise } from '../../Buttons/ButtonMaximise';
export class PanelToolPanel extends React.Component {
    render() {
        const { useDefaultPanelStyle, isMinimised, onMinimiseChanged, headerText, onClose, onConfigure, ...props } = this.props;
        let header = (React.createElement(React.Fragment, null,
            !isMinimised ? (React.createElement(ButtonMinimise, { className: "ab-ToolPanelPanel__header-minimise", onClick: () => onMinimiseChanged(), marginRight: 1 })) : (React.createElement(ButtonMaximise, { className: "ab-ToolPanelPanel__header-maximise", onClick: () => onMinimiseChanged(), marginRight: 1 })),
            React.createElement(Flex, { className: "ab-ToolPanelPanel__header-text", flex: 1, alignItems: "center", marginLeft: 0 }, headerText),
            onConfigure && (React.createElement(ButtonConfigure, { iconSize: 16, marginLeft: 1, className: "ab-ToolPanelPanel__header-configure-button", tooltip: 'Configure ' + headerText, onClick: () => onConfigure() })),
            onClose && (React.createElement(ButtonClose, { marginLeft: 0, className: "ab-ToolPanelPanel__header-close-button", tooltip: 'Close ' + headerText, onClick: () => onClose(), disabled: props.disabled }))));
        return (React.createElement(Panel, { border: "var(--ab-cmp-toolpanelpanel__border)", ...props, className: join('ab-ToolPanelPanel', props.className), header: header, style: {
                color: 'var(--ab-cmp-toolpanelpanel__color)',
                fill: 'var(--ab-cmp-toolpanelpanel__fill)',
                ...props.style,
            }, headerProps: {
                ...props.headerProps,
                alignItems: 'stretch',
                style: {
                    padding: 'var(--ab-cmp-toolpanelpanel_header__padding)',
                    background: 'var(--ab-cmp-toolpanelpanel_header__background)',
                    color: 'var(--ab-cmp-toolpanelpanel_header__color)',
                    fill: 'var(--ab-cmp-toolpanelpanel_header__fill)',
                    ...(props.headerProps ? props.headerProps.style : null),
                },
            }, bodyProps: {
                ...props.bodyProps,
                style: {
                    padding: 'var(--ab-cmp-dashboardpanel_body__padding)',
                    background: 'var(--ab-cmp-dashboardpanel_body__background)',
                    ...(props.bodyProps ? props.bodyProps.style : null),
                    display: 'flex',
                    flexDirection: 'column',
                },
            } }));
    }
}
PanelToolPanel.defaultProps = {
    headerText: '',
    onClose: null,
    onConfigure: null,
    onMinimiseChanged: null,
    isMinimised: true,
};
