import React, { useState } from 'react';
import { makeStyles, Collapse } from '@material-ui/core';
import { AmbientCard } from '../AmbientCard';
import { FluentIconButton } from '../../../inputs/buttons/FluentIconButton';
import { LayoutUnit } from '../../../../layout/LayoutUnit';
import { ChevronDownIcon, ChevronUpIcon } from '@fluentui/react-icons';
import { WorkOrderHeader } from './WorkOrderHeader';
const useStyles = makeStyles(theme => ({
    root: {},
    moreButton: {
        display: 'flex',
        // justifyContent: 'flex-end',
    },
}));
export const WorkOrderCard = ({ title, onClick, status, label, cost, hours, service, list, extendedList, launch, }) => {
    const classes = useStyles();
    const [expanded, setExpanded] = useState(false);
    return (React.createElement("div", { className: classes.root }, React.createElement(AmbientCard, { title: title, onClick: onClick, ariaLabel: "launch", fullWidth: true, status: status, label: label, launch: launch, extendedContent: expanded }, cost && (React.createElement("div", null, React.createElement("div", null, React.createElement(WorkOrderHeader, { cost: cost, hours: hours })), React.createElement(LayoutUnit, { unit: "sm" }), service, React.createElement(LayoutUnit, { unit: "sm" }))), !cost && React.createElement("div", null, " ", service), React.createElement("div", null, list, React.createElement(LayoutUnit, { unit: "xxs" }), extendedList && (React.createElement("div", { className: classes.moreButton }, React.createElement(FluentIconButton, { onClick: () => setExpanded(!expanded), icon: expanded ? ChevronUpIcon : ChevronDownIcon, className: classes.icon }))), React.createElement(Collapse, { in: expanded, timeout: "auto" }, React.createElement("div", null, extendedList))))));
};
//# sourceMappingURL=WorkOrderCard.js.map