import React, { useMemo } from 'react';
import { fluentLibraryIcons } from '../assets/unityIcons/LibraryData';
import { UnityFluentIcon } from '../utilities/iconLibrary/UnityFluentIcon';
import { Typography, useTheme, makeStyles } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
    labelRoot: {
        display: 'flex',
        alignItems: 'center'
    },
    labelText: {
        fontWeight: 'inherit',
        flexGrow: 1,
        lineHeight: '1.25rem'
    },
    iconContainer: {
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'center',
        width: theme.spacing(4)
    },
    labelContainer: {
        width: `calc(100% - ${theme.spacing(1.0)}px)`
    }
}));
/**
 * `ItemDescription` component
 */
export const ItemDescription = (props) => {
    const { iconName = 'none', label, iconSize = 'medium', iconType = '', iconColor = '', variant = 'caption', style = {} } = props;
    const theme = useTheme();
    const classes = useStyles(props);
    const IconComponent = useMemo(() => {
        if (!iconName || iconName === 'none') {
            return null;
        }
        const result = fluentLibraryIcons.find((item) => item.id.toLowerCase().includes(iconName.toLowerCase()));
        return (result === null || result === void 0 ? void 0 : result.icon) || null;
    }, [iconName]);
    return (React.createElement("div", { className: classes.labelRoot }, IconComponent && (React.createElement("div", { className: classes.iconContainer }, React.createElement(UnityFluentIcon, { size: iconSize, color: iconColor || theme.palette.primary.main, type: iconType, icon: IconComponent, styles: Object.assign({ color: iconColor }, style) }))), React.createElement("div", { className: classes.labelContainer }, React.createElement(Typography, { variant: variant, className: classes.labelText, style: style }, label))));
};
//# sourceMappingURL=ItemDescription.js.map