import { jsx as _jsx } from "react/jsx-runtime";
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/
import { Backdrop, Button, Chip, ClickAwayListener, Paper, buttonClasses, } from "@mui/material";
import * as _ from "lodash-es";
import { forwardRef } from "react";
import tc from "tinycolor2";
import { makeStyles } from "tss-react/mui";
import { PANEL_ROOT_CLASS_NAME } from "@foxglove/studio-base/components/PanelRoot";
import { PANEL_TOOLBAR_MIN_HEIGHT } from "@foxglove/studio-base/components/PanelToolbar";
const useStyles = makeStyles()((theme, _params, classes) => {
    const transparentBackground = tc(theme.palette.background.default).setAlpha(0).toRgbString();
    const hoverBackground = tc(theme.palette.background.default)
        .setAlpha(1 - theme.palette.action.disabledOpacity)
        .toRgbString();
    const hoverPrimary = tc(theme.palette.primary.main)
        .setAlpha(theme.palette.action.hoverOpacity)
        .toRgbString();
    return {
        backdrop: {
            position: "absolute",
            zIndex: theme.zIndex.modal - 1,
            padding: theme.spacing(2),
            container: "backdrop / size",
            backgroundColor: transparentBackground,
            overflow: "hidden",
        },
        invalidTarget: {
            backgroundColor: hoverBackground,
        },
        validTarget: {
            alignItems: "flex-end",
            backgroundColor: hoverPrimary,
        },
        selected: {
            backgroundImage: `linear-gradient(to bottom, ${hoverPrimary}, ${hoverPrimary})`,
            backgroundColor: hoverBackground,
        },
        highlightActive: {
            [`.${PANEL_ROOT_CLASS_NAME}:not(:hover) &`]: {
                visibility: "hidden",
            },
        },
        highlightAll: {
            [`.${PANEL_ROOT_CLASS_NAME}:not(:hover) &`]: {
                [`.${classes.buttonGroup}`]: { visibility: "hidden" },
            },
        },
        buttonGroup: {
            display: "flex",
            minWidth: "100%",
            justifyContent: "center",
            alignItems: "center",
            gap: theme.spacing(1),
            "@container backdrop (min-height: 120px)": {
                marginTop: PANEL_TOOLBAR_MIN_HEIGHT,
            },
            "@container backdrop (max-width: 240px)": {
                flexDirection: "column",
            },
        },
        buttonPaper: {
            "@container backdrop (min-width: 100px)": {
                minWidth: 90,
            },
            "@container backdrop (min-width: 120px)": {
                minWidth: "none",
            },
        },
        button: {
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            whiteSpace: "nowrap",
            textAlign: "left",
            [`.${buttonClasses.startIcon}`]: {
                position: "relative",
                margin: 0,
                svg: {
                    height: "1em",
                    width: "1em",
                    fontSize: 32,
                },
            },
        },
        buttonText: {
            "@container backdrop (max-width: 120px)": {
                display: "none",
            },
            "@container backdrop (max-height: 80px)": {
                display: "none",
            },
        },
        chip: {
            boxShadow: theme.shadows[2],
            paddingInline: theme.spacing(2),
        },
    };
});
export const PanelOverlay = forwardRef(function PanelOverlay(props, ref) {
    const { actions, variant, highlightMode, dropMessage, open, onClickAway } = props;
    const { classes, cx } = useStyles();
    return (_jsx(ClickAwayListener, { onClickAway: onClickAway ? onClickAway : _.noop, children: _jsx(Backdrop, { transitionDuration: 0, unmountOnExit: true, ref: ref, open: open, className: cx(classes.backdrop, {
                [classes.invalidTarget]: variant === "invalidDropTarget",
                [classes.validTarget]: variant === "validDropTarget",
                [classes.selected]: variant === "selected",
                [classes.highlightActive]: highlightMode === "active",
                [classes.highlightAll]: highlightMode === "all",
            }), children: dropMessage && variant === "validDropTarget" ? (_jsx(Chip, { size: "small", color: "primary", label: dropMessage, className: classes.chip })) : (actions && (_jsx("div", { className: classes.buttonGroup, children: actions.map((action) => (_jsx(Paper, { square: false, elevation: 0, className: classes.buttonPaper, children: _jsx(Button, { fullWidth: true, variant: "outlined", className: classes.button, onClick: action.onClick, startIcon: action.icon, color: action.color, children: _jsx("div", { className: classes.buttonText, children: action.text }) }) }, action.key))) }))) }) }));
});
//# sourceMappingURL=PanelOverlay.js.map