import React, { useEffect, useState } from "react";

import Box from "@mui/material/Box";
import Checkbox from "@mui/material/Checkbox";
import Input from "@mui/material/Input";
import MenuItem from "@mui/material/MenuItem";
import Paper from "@mui/material/Paper";
import Select from "@mui/material/Select";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";

export interface ReturnOrderItemProspectLineProps {
  description: string;
  quantity: number;
  sku: string;
  returnCodes: Record<string, string>;

  defaultReturnCode?: string;

  onChange: (checked: boolean, quantity: number, returnCode: string) => void;
}

export const ReturnOrderItemProspectLine: React.FC<ReturnOrderItemProspectLineProps> = ({
  description,
  quantity: maxQuantity,
  sku,
  returnCodes,
  defaultReturnCode,
  onChange,
}) => {
  const [checked, setChecked] = useState(false);
  const [quantity, setQuantity] = useState(1);
  const [returnCode, setReturnCode] = useState(defaultReturnCode ?? Object.keys(returnCodes)[0]);

  useEffect(() => onChange(checked, quantity, returnCode), [checked, quantity, returnCode]);

  return (
    <Paper elevation={0}>
      <Stack alignItems="center" direction="row" padding={1} spacing={2}>
        <Checkbox
          sx={{ flexShrink: 1 }}
          value={checked}
          onChange={(_, checked) => setChecked(checked)}
        />
        <Stack direction="row" sx={{ flexGrow: 1, alignItems: "center" }}>
          <Typography fontSize={14} sx={{ width: "25%", verticalAlign: "middle" }}>
            {description}
          </Typography>
          <Typography fontSize={14} sx={{ width: "25%", verticalAlign: "middle" }}>
            {sku}
          </Typography>
          {checked && (
            <>
              <Box sx={{ width: "25%" }}>
                <Select
                  fullWidth
                  labelId="return-type"
                  size="small"
                  value={returnCode}
                  onChange={(event) => setReturnCode(event.target.value)}
                >
                  {Object.entries(returnCodes).map(([returnCode, returnTitle]) => (
                    <MenuItem key={returnCode} value={returnCode}>
                      {returnTitle}
                    </MenuItem>
                  ))}
                </Select>
              </Box>
              <Box sx={{ display: "flex", width: "25%", justifyContent: "end" }}>
                <Input
                  fullWidth
                  defaultValue={quantity}
                  inputProps={{
                    max: maxQuantity,
                    min: 1,
                  }}
                  sx={{ maxWidth: "4rem", marginRight: 3 }}
                  type="number"
                  onChange={(event) =>
                    setQuantity(Math.min(parseInt(event.target.value), maxQuantity))
                  }
                />
              </Box>
            </>
          )}
        </Stack>
      </Stack>
    </Paper>
  );
};