import React, { useState } from 'react';
import { makeStyles, Popover, Typography, useTheme } from '@material-ui/core';
import { ChevronDownIcon } from '@fluentui/react-icons';
import { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton';
import { AmbientPopoverMenuItem } from '../../UI/inputs/buttons/AmbientPopoverMenuItem';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        // border: '1px solid white',
        background: props => props.backgroundColor ? props.backgroundColor : theme.palette.secondary.main,
        borderRadius: 50,
        padding: 6,
        paddingLeft: 16
    },
    popoverRoot: {},
    icon: {
        color: theme.palette.primary.main,
        borderRadius: 50
    },
    label: {
        display: 'block',
        width: props => props.width ? props.width : 100,
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        textOverflow: 'ellipsis'
    },
    listWrapper: {
        marginRight: theme.spacing(2)
    }
}));
export const AmbientProjectSwitcher = (props) => {
    const classes = useStyles(props);
    const theme = useTheme();
    const { data, selectedItem } = props;
    const [anchorEl, setAnchorEl] = useState(null);
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
    const open = Boolean(anchorEl);
    const id = open ? 'open' : undefined;
    return (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.listWrapper }, React.createElement(Typography, { className: classes.label }, selectedItem)), React.createElement(FluentIconButton, { className: classes.icon, icon: ChevronDownIcon, onClick: handleClick, style: { background: theme.palette.common.white } }), React.createElement(Popover, { classes: { root: classes.popoverRoot }, square: true, elevation: 6, id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
            vertical: 'bottom',
            horizontal: 'right'
        }, transformOrigin: {
            vertical: 'top',
            horizontal: 'right'
        } }, React.createElement("div", null, React.createElement("div", null, data && data.map((item) => {
        return (React.createElement(AmbientPopoverMenuItem, { label: item.label, component: ChevronDownIcon, click: () => item.click(item.label) }));
    }))))));
};
AmbientProjectSwitcher.propTypes = {
    /**
     * The array used to map for label and functions to list items. (array).
     */
    data: PropTypes.array,
    /**
     * The active label displayed.
     */
    selectedItem: PropTypes.string,
    /**
     * Change the background color on the project switcher (default: theme secondary)
     */
    backgroundColor: PropTypes.string
};
//# sourceMappingURL=AmbientProjectSwitcher.js.map