import React, { useState } from 'react';
import { makeStyles, IconButton } from '@material-ui/core';
import { redirectToLinkOnClick } from '../../../utilities/menus/redirectToLink';
import { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';
const useStyles = makeStyles((theme) => ({
    icons: {
        color: (props) => props.color
    },
    buttonGroup: {
        display: 'flex',
        alignItems: 'center',
        marginBottom: '16px !important',
        width: 190
    },
    label: {
        paddingLeft: theme.spacing(3)
    },
    images: {
        width: theme.spacing(3),
        height: theme.spacing(3),
        cursor: 'pointer',
        color: 'lightslategray'
    }
}));
const ProductAppListItem = (props) => {
    const classes = useStyles(props);
    const { label, redirectInfo, image, icon, getAccessToken, user } = props;
    const [open, setOpen] = useState(false);
    const handleClick = () => {
        redirectToLinkOnClick(redirectInfo, getAccessToken, user);
        setOpen(!open);
    };
    return image ? (React.createElement("div", { className: classes.buttonGroup }, React.createElement(IconButton, { className: classes.icons, onClick: handleClick }, React.createElement("img", { src: image, alt: label, className: classes.images })), React.createElement("div", { className: classes.label }, label))) : (React.createElement("div", { className: classes.buttonGroup }, icon && (React.createElement(FluentIcon, { component: icon, className: classes.images, onClick: handleClick })), React.createElement("div", { className: classes.label }, label)));
};
export default ProductAppListItem;
//# sourceMappingURL=ProductAppListItem.js.map