import Button from '@mui/material/Button';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import React, { useContext } from 'react';
import { makeStyles } from '../../shared/makeStyles';
import { Flex } from '../Flex';
import { GameLogContext } from '../GameLogContextProvider';
import { ArrowDownIcon, ArrowUpIcon, CheckIcon } from '../icons';
import { TargetIcon } from './TargetIcon';
import { useDiceRollPrivacyStore } from '@dndbeyond/pocket-dimension-dice/hooks/useDiceRollPrivacyStore';
import { RollTos } from '@dndbeyond/pocket-dimension-dice/constants';
const useStyles = makeStyles()(({ gameLog: { fontRoboto, fontRobotoCondensed }, palette }) => ({
    Button: {
        '&.MuiButton-root': {
            position: 'relative',
            top: '0px',
            left: '13px',
            background: '#ffffff',
            height: '32px',
            border: '1px solid #ffffff',
            '&:hover': {
                background: '#f5f8fa',
                border: '1px solid #ced9e0',
                boxSizing: 'border-box',
                borderRadius: '2px',
            },
            '&:focus': {
                outlineWidth: '0px !important',
            },
        },
        '&.MuiButton-text': {
            fontFamily: 'Roboto',
            fontStyle: 'normal',
            fontWeight: 500,
            fontSize: '14px',
            lineHeight: '40px',
            color: '#1c1d1e',
            textTransform: 'none',
        },
    },
    menuPaper: {
        border: '1px solid #ced9e0',
        background: '#ffffff',
        boxSizing: 'border-box',
        borderRadius: '2px',
    },
    menuItemRoot: {
        height: '44px',
        display: 'flex !important',
        '&:focus': {
            outlineWidth: '0px !important',
        },
    },
    listItemTextRoot: {
        width: '105px',
        fontFamily: 'Roboto',
        fontStyle: 'normal',
        fontWeight: 500,
        fontSize: '14px',
        lineHeight: '40px',
        color: palette.text.primary,
        alignItems: 'center',
    },
    listItemIconRoot: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    Title: {
        fontFamily: fontRobotoCondensed,
        fontStyle: 'normal',
        fontWeight: 'bold',
        fontSize: '18px',
    },
    SendToLabel: {
        fontFamily: fontRoboto,
        fontStyle: 'normal',
        fontWeight: 'bold',
        fontSize: '11px',
        lineHeight: '13px',
        alignItems: 'center',
        letterSpacing: '1px',
        textTransform: 'uppercase',
        color: '#6f7478',
    },
    Container: {
        width: '100%',
        padding: '10px',
    },
}));
export const GameLogHeader = ({ headerName }) => {
    const [{ messageTargetOptions, targetingDisabled, userId, activeCampaign }] = useContext(GameLogContext);
    const { classes } = useStyles();
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const [anchorEl, setAnchorEl] = React.useState(null);
    const diceRollPrivacy = useDiceRollPrivacyStore((state) => state.getDiceRollPrivacy(Number(userId)));
    const selectedTargetId = (diceRollPrivacy === null || diceRollPrivacy === void 0 ? void 0 : diceRollPrivacy.rollTo) === RollTos.Everyone ? 0 : 1;
    const handleClose = () => {
        setAnchorEl(null);
    };
    const hasTargetOptions = Object.values(messageTargetOptions.entities).length > 0;
    const getRollToText = (rollToOption) => rollToOption === RollTos.Self
        ? String(activeCampaign === null || activeCampaign === void 0 ? void 0 : activeCampaign.dmId) === userId
            ? 'Self'
            : 'DM'
        : 'Everyone';
    return (React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start", className: classes.Container },
        React.createElement("div", { className: classes.Title }, headerName),
        !targetingDisabled && activeCampaign && (React.createElement(Flex, null,
            React.createElement("span", { className: classes.SendToLabel }, "Send To (Default):"),
            React.createElement(Button, { className: classes.Button, onClick: handleClick, startIcon: React.createElement(TargetIcon, { iconId: selectedTargetId }), endIcon: hasTargetOptions &&
                    (anchorEl ? React.createElement(ArrowUpIcon, null) : React.createElement(ArrowDownIcon, null)), disableRipple: true, disableFocusRipple: true, disabled: !hasTargetOptions }, (diceRollPrivacy === null || diceRollPrivacy === void 0 ? void 0 : diceRollPrivacy.rollTo)
                ? getRollToText(diceRollPrivacy.rollTo)
                : 'Everyone'),
            hasTargetOptions && (React.createElement(Menu, { classes: { paper: classes.menuPaper }, anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose, style: { zIndex: 60001 }, disableScrollLock: true, elevation: 0, anchorOrigin: {
                    vertical: 'bottom',
                    horizontal: 'right',
                }, transformOrigin: {
                    vertical: 'top',
                    horizontal: 'left',
                } }, Object.values(RollTos).map((rollToOption) => (React.createElement(MenuItem, { classes: { root: classes.menuItemRoot }, key: rollToOption, value: rollToOption, onClick: () => useDiceRollPrivacyStore
                    .getState()
                    .setRollToPrivacy(Number(userId)), disableGutters: true, disableRipple: true },
                React.createElement(ListItemIcon, { classes: { root: classes.listItemIconRoot } }, React.createElement(TargetIcon, { iconId: rollToOption === RollTos.Everyone ? 0 : 1 })),
                React.createElement(ListItemText, { classes: { root: classes.listItemTextRoot }, disableTypography: true }, getRollToText(rollToOption)),
                React.createElement(ListItemIcon, { classes: { root: classes.listItemIconRoot } }, (selectedTargetId === 0 &&
                    rollToOption === RollTos.Everyone) ||
                    (selectedTargetId === 1 &&
                        rollToOption === RollTos.Self) ? (React.createElement(CheckIcon, null)) : (React.createElement(React.Fragment, null))))))))))));
};
//# sourceMappingURL=GameLogHeader.js.map