import type { Interpolation, Theme } from "@emotion/react";
import TextField from "@mui/material/TextField";
import { type FC, type FormEvent, useId, useState } from "react";
import { Stack } from "../../Stack/Stack";
import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog";

export interface DeleteDialogProps {
  isOpen: boolean;
  onConfirm: () => void;
  onCancel: () => void;
  entity: string;
  name: string;
  info?: string;
  confirmLoading?: boolean;
  verb?: string;
  title?: string;
  label?: string;
  confirmText?: string;
}

export const DeleteDialog: FC<DeleteDialogProps> = ({
  isOpen,
  onCancel,
  onConfirm,
  entity,
  info,
  name,
  confirmLoading,
  // All optional to change the verbiage. For example, "unlinking" vs "deleting"
  verb,
  title,
  label,
  confirmText,
}) => {
  const hookId = useId();

  const [userConfirmationText, setUserConfirmationText] = useState("");
  const [isFocused, setIsFocused] = useState(false);

  const deletionConfirmed = name === userConfirmationText;
  const onSubmit = (event: FormEvent) => {
    event.preventDefault();
    if (deletionConfirmed) {
      onConfirm();
    }
  };

  const hasError = !deletionConfirmed && userConfirmationText.length > 0;
  const displayErrorMessage = hasError && !isFocused;
  const inputColor = hasError ? "error" : "primary";

  return (
    <ConfirmDialog
      type="delete"
      hideCancel={false}
      open={isOpen}
      title={title ?? `Delete ${entity}`}
      onConfirm={onConfirm}
      onClose={onCancel}
      confirmLoading={confirmLoading}
      disabled={!deletionConfirmed}
      confirmText={confirmText}
      description={
        <>
          <Stack spacing={1.5}>
            <p>
              {verb ?? "Deleting"} this {entity} is irreversible!
            </p>

            {Boolean(info) && <div css={styles.callout}>{info}</div>}

            <p>
              Type <strong>{name}</strong> below to confirm.
            </p>
          </Stack>

          <form onSubmit={onSubmit}>
            <TextField
              fullWidth
              autoFocus
              css={{ marginTop: 24 }}
              name="confirmation"
              autoComplete="off"
              id={`${hookId}-confirm`}
              placeholder={name}
              value={userConfirmationText}
              onChange={(event) => setUserConfirmationText(event.target.value)}
              onFocus={() => setIsFocused(true)}
              onBlur={() => setIsFocused(false)}
              label={label ?? `Name of the ${entity} to delete`}
              color={inputColor}
              error={displayErrorMessage}
              helperText={
                displayErrorMessage &&
                `${userConfirmationText} does not match the name of this ${entity}`
              }
              InputProps={{ color: inputColor }}
              inputProps={{
                "data-testid": "delete-dialog-name-confirmation",
              }}
            />
          </form>
        </>
      }
    />
  );
};

const styles = {
  callout: (theme) => ({
    backgroundColor: theme.roles.danger.background,
    border: `1px solid ${theme.roles.danger.outline}`,
    borderRadius: theme.shape.borderRadius,
    color: theme.roles.danger.text,
    padding: "8px 16px",
  }),
} satisfies Record<string, Interpolation<Theme>>;
