import { Button, type ButtonProps } from "@mantine/core";
import { CheckCircle2 } from "lucide-react";
import { type MouseEvent, useState } from "react";

import { ApproveDeliveryModal } from "./ApproveDeliveryModal";

type ApproveDeliveryButtonProps = ButtonProps & {
  bookingId: string;
  stopPropagation?: boolean;
  onApproved?: () => void;
};

export function ApproveDeliveryButton({
  bookingId,
  stopPropagation,
  onApproved,
  size = "sm",
  variant = "filled",
  ...props
}: ApproveDeliveryButtonProps) {
  const [opened, setOpened] = useState(false);

  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
    if (stopPropagation) event.stopPropagation();
    setOpened(true);
  };

  return (
    <>
      <Button
        {...props}
        size={size}
        variant={variant}
        color="edr-green"
        leftSection={<CheckCircle2 size={16} />}
        onClick={handleClick}
      >
        Approve delivery
      </Button>
      <ApproveDeliveryModal
        bookingId={bookingId}
        opened={opened}
        onClose={() => setOpened(false)}
        onApproved={onApproved}
      />
    </>
  );
}
