import React from "react";

import CancelIcon from "@mui/icons-material/Cancel";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
import IconButton from "@mui/material/IconButton";
import InputAdornment from "@mui/material/InputAdornment";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import TableCell from "@mui/material/TableCell";
import TableRow from "@mui/material/TableRow";
import TextField from "@mui/material/TextField";

import { ArticlePriceListSerializer, ArticlePriceSerializer } from "../types/contrib";

export interface ArticlePriceRowProps {
  price: ArticlePriceSerializer;
  isEditing: boolean;
  isDisabled: boolean;
  onChangeAmount: (amount: string) => void;
  priceLists?: ArticlePriceListSerializer[];
  onChangePriceList?: (priceList: number) => void;
  onDelete: () => void;
}

export const ArticlePriceRow: React.FC<ArticlePriceRowProps> = ({
  price,
  isEditing,
  isDisabled,
  onChangeAmount,
  onChangePriceList,
  onDelete,
  priceLists,
}) => {
  const priceListOptions = priceLists ?? [];
  const hasPriceListSelector =
    isEditing && Boolean(onChangePriceList) && priceListOptions.length > 0;

  return (
    <TableRow sx={{ height: 56 }}>
      <TableCell colSpan={hasPriceListSelector ? 3 : 1} sx={{ py: 0 }}>
        {hasPriceListSelector ? (
          <Select
            fullWidth
            required
            disabled={isDisabled}
            size="small"
            value={price.price_list.id}
            onChange={(event) => onChangePriceList?.(Number(event.target.value))}
          >
            {priceListOptions.map((priceList) => (
              <MenuItem key={priceList.id} value={priceList.id}>
                {`${priceList.name} - ${priceList.channel} / ${priceList.site_code}`}
              </MenuItem>
            ))}
          </Select>
        ) : (
          price.price_list.name
        )}
      </TableCell>
      {!hasPriceListSelector && (
        <>
          <TableCell sx={{ py: 0 }}>{price.price_list.channel}</TableCell>
          <TableCell sx={{ py: 0 }}>{price.price_list.site_code}</TableCell>
        </>
      )}

      <TableCell align="right" sx={{ py: 0 }}>
        {isEditing ? (
          <TextField
            required
            disabled={isDisabled}
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">{price.price_list.currency}</InputAdornment>
              ),
            }}
            size="small"
            sx={{ ".MuiInputBase-input": { textAlign: "right" } }}
            value={price.amount}
            onChange={(event) => onChangeAmount?.(event.target.value)}
          />
        ) : (
          <>
            {price.amount}
            {price.price_list.currency && ` ${price.price_list.currency}`}
          </>
        )}
      </TableCell>

      <TableCell align="right" sx={{ pt: 1, pb: 0 }}>
        {price.price_list.is_active ? (
          <CheckCircleIcon color="success" />
        ) : (
          <CancelIcon color="error" />
        )}
      </TableCell>

      <TableCell align="right" sx={{ py: 0, pl: 0 }}>
        {isEditing && (
          <IconButton disabled={isDisabled} onClick={() => onDelete?.()}>
            <DeleteOutlineOutlinedIcon />
          </IconButton>
        )}
      </TableCell>
    </TableRow>
  );
};