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

import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Stack,
  TextField,
} from "@mui/material";

import { useSnackbar } from "notistack";

import { useApi } from "../../../contexts/ApiContext";
import { useI18n } from "../../../contexts/I18nContext";
import { WalletAccount } from "../types/wallet";

export interface WalletTransactionDialogProps {
  account: WalletAccount;
  membershipNumber: number;
  onClose: () => void;
  onCreated: () => void;
}

const WalletTransactionDialog: React.FC<WalletTransactionDialogProps> = ({
  account,
  membershipNumber,
  onClose,
  onCreated,
}) => {
  const api = useApi();
  const { t } = useI18n();
  const { enqueueSnackbar } = useSnackbar();
  const [amount, setAmount] = useState("");
  const [description, setDescription] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const session = useRef(crypto.randomUUID());

  const isWithdrawal = Number(amount) < 0;
  const action = isWithdrawal ? "WITHDRAWAL" : "DEPOSIT";
  const submitColor = isWithdrawal ? "error" : "info";
  const submitLabel = isWithdrawal ? "Withdraw" : "Deposit";

  const submit = async (event: React.FormEvent<HTMLDivElement>) => {
    event.preventDefault();
    const operation = api.operations["wallet.contrib:member-wallet-transaction-create"];
    if (!operation) {
      throw new Error('Invalid action "wallet.contrib:member-wallet-transaction-create".');
    }

    setSubmitting(true);
    try {
      const response = await operation.call(
        {
          params: { membership_number: membershipNumber, account_id: account.id },
          body: {
            action,
            amount: isWithdrawal ? amount.slice(1) : amount,
            description,
          },
        },
        { headers: { "X-Wallet-Session": session.current } },
      );

      if (response.ok) {
        enqueueSnackbar(t("Wallet balance updated"), { variant: "success" });
        onClose();
        onCreated();
        return;
      }

      const error = (await response.json().catch(() => null)) as { detail?: unknown } | null;
      const detail =
        typeof error?.detail === "string" ? error.detail : t("Failed to update wallet");
      enqueueSnackbar(detail, { variant: "error" });
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Dialog
      fullWidth
      open
      component="form"
      maxWidth="sm"
      onClose={submitting ? undefined : onClose}
      onSubmit={submit}
    >
      <DialogTitle>{t("Adjust wallet balance")}</DialogTitle>
      <DialogContent>
        <Stack gap={3} pt={1}>
          <TextField
            fullWidth
            required
            label={t("Amount")}
            slotProps={{
              htmlInput: { step: 0.01 },
              input: {
                endAdornment: account.currency,
              },
            }}
            type="number"
            value={amount}
            onChange={(event) => setAmount(event.target.value)}
          />

          <TextField
            fullWidth
            required
            label={t("Description")}
            value={description}
            onChange={(event) => setDescription(event.target.value)}
          />
        </Stack>
      </DialogContent>
      <DialogActions sx={{ px: 3, pb: 3 }}>
        <Button disabled={submitting} onClick={onClose}>
          {t("Cancel")}
        </Button>
        <Button color={submitColor} disabled={submitting} type="submit" variant="contained">
          {t(submitLabel)}
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default WalletTransactionDialog;