import React from "react";

import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
import { IconButton, InputAdornment, TableRow, TextField } from "@mui/material";

import { TableCell } from "../../../components/Table/TableCell";
import { useI18n } from "../../../contexts/I18nContext";
import { Price } from "../types/contrib";

export interface PriceRowProps {
  price: Price;
  isEditing: boolean;
  isDisabled: boolean;
  onChangeAmount: (amount: string) => void;
  onChangeArticleCode?: (amount: string) => void;
  onDelete: () => void;
}

export const PriceRow: React.FC<PriceRowProps> = ({
  price,
  isEditing,
  isDisabled,
  onChangeAmount,
  onChangeArticleCode,
  onDelete,
}) => {
  const { t } = useI18n();

  return (
    <TableRow sx={{ height: 56 }}>
      <TableCell sx={{ py: 0 }}>
        {isEditing && onChangeArticleCode ? (
          <TextField
            fullWidth
            required
            disabled={isDisabled}
            size="small"
            value={price.article_code}
            onChange={(event) => onChangeArticleCode(event.target.value)}
          />
        ) : (
          price.article_code
        )}
      </TableCell>

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

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