/* eslint-disable react/self-closing-comp */
import React, { useState } from 'react';
import { makeStyles, Divider, Collapse } from '@material-ui/core';
import clsx from 'clsx';
import { LayoutUnit } from '../../layout/LayoutUnit';
import { FluentIcon } from '../../utilities/iconLibrary/FluentIcon';
import { ChevronDownIcon } from '@fluentui/react-icons';
import { Typography } from './typography/Typography';
import { FluentCheckbox } from '../inputs/checkbox/FluentCheckbox';
const useStyles = makeStyles((theme) => ({
    root: {
        height: theme.spacing(5)
    },
    wrapper: {
        display: 'flex',
        flexDirection: 'row'
    },
    titleWrapper: {
        display: 'flex',
        width: '100%',
        textAlign: 'left',
        alignItems: 'center'
    },
    title: {
        flex: 1
    },
    progress: {
        height: 2,
        '&::after': {
            content: `''`,
            display: 'block',
            background: theme.palette.secondary.main,
            width: (props) => (props.progress / props.total) * 425,
            height: '100%'
        }
    },
    iconStart: {
        marginRight: theme.spacing(1)
    },
    iconEnd: {
        marginLeft: theme.spacing(1)
    },
    expand: {
        transform: 'rotate(0deg)',
        transition: theme.transitions.create('transform', {
            duration: theme.transitions.duration.shortest
        })
    },
    expandOpen: {
        transform: 'rotate(180deg)'
    },
    iconSpace: {
        width: theme.spacing(2.75)
    },
    valueWrapper: {
        display: 'flex',
        alignItems: 'center'
    },
    valueIcon: {
        marginRight: theme.spacing(1)
    },
    checkbox: {
        marginRight: theme.spacing(1),
        padding: '0px'
    }
}), { name: 'FluentListItem' });
export const FluentListItem = (props) => {
    const classes = useStyles(props);
    const { subject, value, visualization, boldSubject = true, expandable = false, valueTextColor, icon, iconColor, iconEnd = true, valueIcon, valueIconColor, hideDivider = false, children, expandedDefaultValue = false, keepIconLeftSpace = false, keepIconRightSpace = false, defaultChecked = false, onCheckEvent } = props;
    const [expandItem, setExpandItem] = useState(expandedDefaultValue);
    const handleOnClick = () => {
        setExpandItem(!expandItem);
    };
    return (React.createElement("div", null, React.createElement("div", { className: classes.root, onClick: expandable ? handleOnClick : null }, React.createElement("div", { className: classes.wrapper }, React.createElement("div", { className: classes.titleWrapper }, keepIconLeftSpace && (!expandable || iconEnd) && (React.createElement("div", { className: classes.iconSpace })), onCheckEvent && (React.createElement(FluentCheckbox, { defaultChecked: defaultChecked, onChange: onCheckEvent, className: classes.checkbox })), (icon || expandable) && !iconEnd && (React.createElement(FluentIcon, { component: expandable ? ChevronDownIcon : icon, color: iconColor, className: clsx(classes.iconStart, {
            [classes.expand]: expandable,
            [classes.expandOpen]: expandable && expandItem
        }), size: "small" })), React.createElement("div", { className: classes.title }, React.createElement(Typography, { variant: "body1" }, boldSubject ? React.createElement("strong", null, subject) : subject)), React.createElement(LayoutUnit, { unit: "nudge" }), React.createElement("div", { className: classes.valueWrapper }, valueIcon && (React.createElement(FluentIcon, { component: valueIcon, color: valueIconColor, className: classes.valueIcon, size: "small" })), React.createElement(Typography, { variant: "body1", color: valueTextColor }, value)), (icon || expandable) && iconEnd && (React.createElement(FluentIcon, { component: expandable ? ChevronDownIcon : icon, color: iconColor, className: clsx(classes.iconEnd, {
            [classes.expand]: expandable,
            [classes.expandOpen]: expandable && expandItem
        }), size: "small" })), keepIconRightSpace && (!expandable || !iconEnd) && (React.createElement("div", { className: classes.iconSpace })))), React.createElement(LayoutUnit, { unit: "nudge" }), !hideDivider && (React.createElement(Divider, { className: visualization && classes.progress }))), React.createElement(Collapse, { in: expandItem, timeout: "auto", unmountOnExit: true }, React.createElement("div", null, children))));
};
//# sourceMappingURL=FluentListItem.js.map