import clsx from "clsx";
import { FC, useEffect, useState } from "react";

import ChevronIcon from "@dndbeyond/fontawesome-cache/svgs/solid/chevron-right.svg";
import CloseIcon from "@dndbeyond/fontawesome-cache/svgs/solid/x.svg";

import { Button } from "~/components/Button";
import { Dialog, DialogProps } from "~/components/Dialog";
import characterGalleryImg from "~/images/character-gallery.png";
import characterSheetImg from "~/images/character-sheet.png";
import tadaEmoji from "~/images/tada-emoji.svg?url";

import styles from "./styles.module.css";

export interface ClaimConfirmationDialogProps
  extends Omit<DialogProps, "onClose" | "open"> {
  characterId: number;
  campaignId?: number | null;
}

export const ClaimConfirmationDialog: FC<ClaimConfirmationDialogProps> = ({
  className,
  characterId,
  campaignId,
  ...props
}) => {
  const [isOpen, setIsOpen] = useState(true);

  const handleClose = () => {
    window.location.href = `/characters/${characterId}`;
  };

  useEffect(() => {
    if (characterId) setIsOpen(true);
  }, [characterId]);

  return (
    <Dialog
      className={clsx([styles.dialog, className])}
      open={isOpen}
      onClose={handleClose}
      modal
      {...props}
    >
      <header className={styles.header}>
        <h2 className={styles.title}>
          <img src={tadaEmoji} alt="Ta-da Emoji" />
          Congratulations!
        </h2>
        <Button
          className={styles.closeButton}
          variant="tool"
          onClick={handleClose}
          aria-label="Close Modal"
        >
          <CloseIcon />
        </Button>
      </header>
      <div className={styles.content}>
        <p className={styles.text}>
          Your character has been claimed and is now available:
        </p>
        <div className={styles.card}>
          <img
            className={styles.cardImage}
            src={characterGalleryImg}
            alt="Premade character gallery"
          />
          <Button
            className={styles.cardButton}
            href="/characters"
            color="primary"
            size="x-small"
          >
            Go to My Characters <ChevronIcon />
          </Button>
        </div>
        <div className={styles.card}>
          <img
            className={styles.cardImage}
            src={characterSheetImg}
            alt="Sample character sheet"
          />
          <Button
            className={styles.cardButton}
            href={`/characters/${characterId}`}
            color="info"
            size="x-small"
          >
            View Your Character <ChevronIcon />
          </Button>
        </div>
      </div>
      <footer className={styles.footer}>
        {campaignId && (
          <Button
            href={`/campaigns/${campaignId}`}
            variant="text"
            color="info"
            size="small"
          >
            or return to your campaign
          </Button>
        )}
      </footer>
    </Dialog>
  );
};