import React, { useState } from 'react';
import { makeStyles, Typography, ButtonBase } from '@material-ui/core';
import { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';
import { Link } from 'react-router-dom';
import { redirectToProductOnClick } from '../../../utilities/DemoJuly/redirectToProduct'; // TODO for demo purposes
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        flexDirection: 'row',
        marginTop: theme.spacing(3),
        marginRight: theme.spacing(6),
        width: 110,
        alignItems: 'center'
    },
    iconStyle: {
        backgroundColor: (props) => props.verticalColor,
        color: theme.palette.getContrastText(theme.palette.secondary.dark),
        width: 40,
        height: 40,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
    },
    iconContainer: {
        marginRight: theme.spacing(1)
    },
    imageIcon: {
        width: 28,
        height: 28
    },
    label: {
        marginTop: theme.spacing(0.5)
    },
    images: {
        width: theme.spacing(6),
        height: theme.spacing(6)
    }
}));
const FUIAppListItem = (props) => {
    const classes = useStyles();
    const { iconStyle } = useStyles(props);
    const { icon, label, color, redirectInfo, link, image, params, closeSwitcher, user } = props;
    const [open, setOpen] = useState(false);
    const handleClick = () => {
        if (redirectInfo) {
            redirectToProductOnClick(redirectInfo, user.currentTenantId); // TODO for demo purposes
        }
        else {
            closeSwitcher();
        }
        setOpen(!open);
    };
    const iconButton = !!icon || !!image ? (redirectInfo ? (React.createElement(ButtonBase, { onClick: handleClick }, image ? (React.createElement("img", { src: image, alt: label, className: classes.images })) : (React.createElement("div", { className: `${iconStyle}` }, React.createElement(FluentIcon, { component: icon, style: { color: `${color ? color : ''}` } }))))) : (React.createElement(ButtonBase, { component: Link, to: {
            pathname: link,
            state: params
        }, onClick: handleClick }, image ? (React.createElement("img", { src: image, alt: label, className: classes.images })) : (React.createElement("div", { className: `${iconStyle}` }, React.createElement(FluentIcon, { component: icon, style: { color: `${color ? color : ''}` } })))))) : null;
    return (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.iconContainer }, iconButton), React.createElement("div", null, React.createElement(Typography, { variant: "caption", className: classes.label }, label))));
};
export default FUIAppListItem;
//# sourceMappingURL=FUIAppListItem.js.map