import React from "react";

import Checkbox from "@mui/material/Checkbox";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography";

import { ReceiptLine as ReceiptLineType } from "../types/receipt";

interface ReceiptLineProps {
  currency: string;
  line: ReceiptLineType;
  onSelect?: (selected: boolean) => void;
}

export const ReceiptLine: React.FC<ReceiptLineProps> = ({ line, currency, onSelect }) => {
  const [selected, setSelected] = React.useState(false);

  React.useEffect(() => {
    onSelect?.(selected);
  }, [selected]);

  return (
    <ListItem sx={{ display: "flex", flexDirection: "line", alignItems: "baseline" }}>
      <Checkbox
        color="secondary"
        value={selected}
        onChange={(_, checked) => setSelected(checked)}
      />
      <ListItemText primary={line.title} secondary={line.reference} sx={{ width: "50%" }} />
      <Tooltip title="Quantity">
        <ListItemText primary={`${line.quantity} st`} sx={{ width: "20%" }} />
      </Tooltip>
      <ListItemText
        disableTypography
        primary={
          <Tooltip title="Price">
            <Typography>
              {line.total_amount} {currency}
            </Typography>
          </Tooltip>
        }
        sx={{ width: "30%" }}
      />
    </ListItem>
  );
};