import {
  Alert,
  Button,
  Group,
  Modal,
  Stack,
  Text,
  TextInput,
} from "@mantine/core";
import type { UseFormReturnType } from "@mantine/form";
import type {
  PromoCode,
  PromoCodeFormValues,
} from "@/lib/features/promo-codes/types";
import { PromoCodeForm } from "./PromoCodeForm";
interface UpdatePromoCodeModalProps {
  opened: boolean;
  onClose: () => void;
  form: UseFormReturnType<PromoCodeFormValues>;
  onSubmit: (values: PromoCodeFormValues) => void;
  busy: boolean;
  updateId: string;
  setUpdateId: (id: string) => void;
  promo?: PromoCode | null;
}
export const UpdatePromoCodeModal: React.FC<UpdatePromoCodeModalProps> = ({
  opened,
  onClose,
  form,
  onSubmit,
  busy,
  updateId,
  setUpdateId,
  promo,
}) => {
  const createdAt =
    (promo as any)?.createdAt ?? (promo as any)?.created_at ?? "";
  const updatedAt =
    (promo as any)?.updatedAt ?? (promo as any)?.updated_at ?? "";

  return (
    <Modal
      opened={opened}
      onClose={onClose}
      title="Update Promo Code"
      size="xl"
    >
      <form onSubmit={form.onSubmit(onSubmit)}>
        <Stack>
          <Group grow>
            <TextInput label="Created At" value={createdAt || "-"} disabled />
            <TextInput label="Updated At" value={updatedAt || "-"} disabled />
          </Group>
          <TextInput
            label="Promo Code ID"
            placeholder="e60260e3-64b3-469a-9f52-370411eceb4f"
            value={updateId}
            onChange={(event) => setUpdateId(event.currentTarget.value)}
            disabled
          />
          <PromoCodeForm form={form} isUpdate />
          <Group justify="flex-end" mt="md">
            <Button variant="default" onClick={onClose}>
              Cancel
            </Button>
            <Button type="submit" loading={busy}>
              Update
            </Button>
          </Group>
          {form.errors._form ? (
            <Alert color="red" variant="light">
              <Text size="sm">{form.errors._form}</Text>
            </Alert>
          ) : null}
        </Stack>
      </form>
    </Modal>
  );
};