import React, { useState, useEffect, useCallback } from 'react';
import { makeStyles, Typography } from '@material-ui/core';
import { AmbientCard } from '../surfaces/cards/AmbientCard';
import { SidebarCollapseButton } from '../../shell/ui/SidebarCollapseButton';
import { UtilityBarInportTarget } from '../../utilities/utilityBar/UtilityBarInport';
import { ResizableBox } from 'react-resizable';
import { APP_RIBBON_SPACE, useBuildEnvironment } from '../../shell/ui/useBuildEnvironment';
const EXPANDED_WIDTH = 288;
const COLLAPSED_WIDTH = 78;
const MAX_WIDTH = 700;
const useStyles = makeStyles((theme) => ({
    resizableBox: {
        position: 'relative',
        height: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 56}px)`,
        display: 'flex',
        flexDirection: 'column',
        minHeight: 0
    },
    root: {
        paddingTop: (props) => props.removePadding || props.sidebarHidden ? 0 : 40,
        overflow: 'hidden',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        minHeight: 0
    },
    cardWrapper: {
        flex: 1,
        minHeight: 0,
        display: 'flex',
        flexDirection: 'column',
        height: '100%'
    },
    headerToggle: {},
    header: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%'
    },
    headerContent: {
        display: (props) => (props.hideTitleBar ? 'none' : 'flex'),
        width: '100%',
        paddingLeft: 12
    },
    title: {
        flex: 1,
        width: '100%',
        paddingTop: 7
    },
    expandedWidth: {
        width: 288
    },
    handle: {
        top: 0,
        right: theme.spacing(-0.75),
        width: theme.spacing(0.75),
        zIndex: 10000,
        height: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 56}px)`,
        display: 'inline-block',
        position: 'absolute',
        '&:hover': {
            cursor: 'col-resize'
        }
    },
    contentWrapper: {
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
        minHeight: 0
    },
    utilityContent: {
        flex: 1,
        minHeight: 0,
        display: 'flex',
        flexDirection: 'column',
        height: '100%'
    }
}));
export const UtilitySideBar = (props) => {
    const { onUtilitySidebarToggleExpandClick, resizable, title, utilitySidebarToggleOverride, isUsingChildren = false, removeTopLayoutUnit = false, collapsedWidth, children, sidebarHidden, handleResize = null } = props;
    const buildEnv = useBuildEnvironment();
    const classes = useStyles(Object.assign(Object.assign({}, props), { appRibbonSpace: buildEnv ? APP_RIBBON_SPACE : 0 }));
    const [expanded, setExpanded] = useState(true);
    const [width, setWidth] = useState(EXPANDED_WIDTH);
    const _collapsedWidth = collapsedWidth !== null && collapsedWidth !== void 0 ? collapsedWidth : COLLAPSED_WIDTH;
    const onResize = (event, { element, size, handle }) => {
        setWidth(size.width);
        if (handleResize) {
            handleResize(size.width);
        }
    };
    const handleToggleClick = useCallback(() => {
        if (onUtilitySidebarToggleExpandClick) {
            onUtilitySidebarToggleExpandClick();
        }
        setExpanded((expanded) => !expanded);
    }, [onUtilitySidebarToggleExpandClick]);
    useEffect(() => {
        if (typeof utilitySidebarToggleOverride === 'boolean') {
            setExpanded(utilitySidebarToggleOverride);
        }
    }, [utilitySidebarToggleOverride]);
    return (React.createElement(ResizableBox, { className: classes.resizableBox, width: expanded ? width : _collapsedWidth, resizeHandles: resizable && expanded ? ['e'] : [], axis: "x", minConstraints: expanded ? [EXPANDED_WIDTH] : [_collapsedWidth], maxConstraints: [MAX_WIDTH], onResize: onResize, handle: expanded && React.createElement("div", { className: classes.handle }) }, React.createElement("div", { className: classes.root, style: { width: expanded ? width : _collapsedWidth, height: '100%' } }, React.createElement("div", { className: classes.cardWrapper }, React.createElement(AmbientCard, { fullWidth: true, cardHeight: "100%", cardContentHeight: "100%", removePadding: true, lastChildBottomPadding: 12, removeTopLayoutUnit: removeTopLayoutUnit || sidebarHidden }, React.createElement("div", { className: classes.contentWrapper }, React.createElement("div", { className: classes.header }, expanded && (React.createElement("div", { className: classes.headerContent }, React.createElement("div", { className: classes.title }, React.createElement(Typography, { variant: "h6" }, " ", title, " ")))), React.createElement("div", { className: classes.headerToggle }, React.createElement(SidebarCollapseButton, { id: 'udpRecord-UtilitySideBar', udprecordid: 'udpRecord-UtilitySideBar', expanded: expanded, onClick: handleToggleClick }))), !isUsingChildren && React.createElement(UtilityBarInportTarget, null), isUsingChildren && (React.createElement("div", { className: classes.utilityContent }, children))))))));
};
//# sourceMappingURL=UtilitySideBar.js.map