import clsx from "clsx";

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

import { Button } from "../Button";
import { Dialog, DialogProps } from "../Dialog";
import { MaxCharactersMessageText } from "../MaxCharactersMessageText";
import styles from "./styles.module.css";

interface MaxCharactersDialogProps
  extends Omit<DialogProps, "onClose" | "open"> {
  open: boolean;
  onClose: () => void;
  useMyCharactersLink?: boolean;
  hasLockedCharacters?: boolean;
}

export const MaxCharactersDialog: React.FC<MaxCharactersDialogProps> = ({
  open,
  onClose,
  useMyCharactersLink,
  hasLockedCharacters,
  className,
  ...props
}) => {
  return (
    <Dialog
      className={clsx([styles.dialog, className])}
      open={open}
      onClose={onClose}
      modal
      {...props}
    >
      <header className={styles.header}>
        <h2 className={styles.title}>Your character slots are full</h2>
        <Button
          className={styles.closeButton}
          variant="tool"
          onClick={onClose}
          aria-label="Close Modal"
        >
          <CloseIcon />
        </Button>
      </header>
      <div className={styles.content}>
        <MaxCharactersMessageText
          hasLockedCharacters={hasLockedCharacters}
          useMyCharactersLink={useMyCharactersLink}
        />
      </div>
      <footer className={styles.footer}>
        {!hasLockedCharacters && (
          <Button
            className={styles.cardButton}
            href="/store/subscribe"
            color="info"
            size="x-small"
            variant="outline"
          >
            Subscribe
          </Button>
        )}
        <Button
          className={styles.cardButton}
          color="info"
          size="x-small"
          onClick={onClose}
        >
          Close
        </Button>
      </footer>
    </Dialog>
  );
};