import React from 'react';
import { Card, Chip, CardContent, makeStyles, useTheme, lighten, Typography, Divider } from '@material-ui/core';
import { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton';
import { MapPinIcon } from '@fluentui/react-icons';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        flexDirection: 'row'
    },
    title: {
        fontWeight: 700
    },
    titleWrapper: {
        marginBottom: theme.spacing(1)
    },
    divider: {},
    body: {
        color: lighten(theme.palette.common.black, 0.5)
    },
    actions: {
        marginTop: theme.spacing(1),
        display: 'flex',
        flexDirection: 'row'
    },
    qty: {
        marginLeft: theme.spacing(1)
    }
}));
export const TileDisplay = (props) => {
    const { title, body, selected } = props;
    const classes = useStyles();
    const qty = Math.floor(Math.random() * 10) + 1;
    const theme = useTheme();
    const Indicator = () => {
        return (React.createElement("svg", { width: "15", height: "10" }, React.createElement("circle", { cx: "70%", cy: "50%", r: "4", fill: theme.palette.success.main })));
    };
    return (React.createElement("div", null, React.createElement(Card, { square: true, elevation: 0, className: classes.root, style: {
            background: selected && lighten(theme.palette.secondary.main, 0.9)
        } }, React.createElement(CardContent, null, React.createElement("div", { className: classes.root }, React.createElement("div", null, React.createElement("div", { className: classes.titleWrapper }, React.createElement(Typography, { className: classes.title, variant: "subtitle" }, title)), React.createElement("div", null, React.createElement(Typography, { className: classes.body, variant: "caption" }, body))), React.createElement("div", null, React.createElement(FluentIconButton, { color: "primary", icon: MapPinIcon }))), React.createElement("div", { className: classes.actions }, React.createElement("div", null, React.createElement(Chip, { variant: "outlined", size: "small", label: "Active", icon: React.createElement(Indicator, null) })), React.createElement("div", { className: classes.qty }, React.createElement(Chip, { variant: "outlined", size: "small", label: `Qty:${qty}` }))))), React.createElement("div", null, React.createElement(Divider, null))));
};
//# sourceMappingURL=TileDisplay.js.map