import { FC, ReactNode } from "react";
import { proxy, useSnapshot } from "valtio";
import Button from "../Button";
import Flex from "../Flex";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogTitle,
} from "./primitive";

export interface AlertState {
  isOpen: boolean;
  title?: string;
  body?: ReactNode;
  cancelText?: string;
  confirmText?: string;
  confirmPrefix?: ReactNode;
  onConfirm?: () => any;
  onCancel?: () => any;
}

export const alertState = proxy<AlertState>({
  isOpen: false,
});

const Alert: FC = () => {
  const {
    title = "Are you sure?",
    isOpen,
    body,
    cancelText,
    confirmText = "Ok",
    confirmPrefix,
    onCancel,
    onConfirm,
  } = useSnapshot(alertState);
  return (
    <AlertDialog
      open={isOpen}
      onOpenChange={value => (alertState.isOpen = value)}
    >
      <AlertDialogContent>
        <AlertDialogTitle>{title}</AlertDialogTitle>
        <AlertDialogDescription>{body}</AlertDialogDescription>
        <Flex css={{ justifyContent: "flex-end", gap: "$3" }}>
          {(cancelText || onCancel) && (
            <AlertDialogCancel asChild>
              <Button css={{ minWidth: "$16" }} outline onClick={onCancel}>
                {cancelText || "Cancel"}
              </Button>
            </AlertDialogCancel>
          )}
          <AlertDialogAction asChild>
            <Button
              css={{ minWidth: "$16" }}
              variant="primary"
              onClick={async () => {
                await onConfirm?.();
                alertState.isOpen = false;
              }}
            >
              {confirmPrefix}
              {confirmText}
            </Button>
          </AlertDialogAction>
        </Flex>
      </AlertDialogContent>
    </AlertDialog>
  );
};

export default Alert;