import {
  Link,
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalHeader,
} from "@nextui-org/react";
import { FaChevronLeft, FaCheck } from "react-icons/fa";

import Button from "@/components/common/button";
import { GDPR_EMAIL } from "@/constants/signup-form-constants";

type CloseAccountModalProps = {
  isOpen: boolean;
  userFirstName: string;
  onClose: () => void;
  onClickDelete: () => void;
};

function CloseAccountModal({
  isOpen,
  userFirstName,
  onClose,
  onClickDelete,
}: CloseAccountModalProps) {
  return (
    <Modal
      backdrop="blur"
      className="p-4"
      classNames={{
        base: "light",
      }}
      isDismissable={false}
      isOpen={isOpen}
      size="2xl"
      onClose={onClose}
    >
      <ModalContent className="text-black space-y-3">
        <ModalHeader className="flex flex-col gap-1 py-0">
          <h3 className="inline-flex font-inter items-center font-black text-xl tracking-tight">
            Close my account
          </h3>
        </ModalHeader>
        <ModalBody>
          <p className="text-sm font-noto leading-6">
            This action will close your account with People for Research and we
            won&apos;t contact you again.
          </p>
          <p className="text-sm font-noto leading-6">
            You won&apos;t be able to reverse this action or log into your
            account and apply for opportunities on the People for Research
            website. If you only wish to unsubscribe from opportunity emails,
            but keep your account active, go to the section called
            &apos;Preferences&apos; in your account. You will be able to
            unsubscribe, but can still apply to research opportunities.
          </p>
          <p className="text-sm font-noto leading-6">
            If you do close your account, any information you have provided as
            part of signing up, applying or taking part in paid research will be
            kept for up to two years for us to comply with our industry
            regulatory body, the Market Research Society (MRS) and the MRS Code
            of conduct. For more information on how we handle your data, please
            read our Privacy Policy.
          </p>
          <p className="text-sm font-noto leading-6">
            If you wish to request the permanent deletion of your personal data,
            please email us at{" "}
            <Link
              className="underline underline-offset-2 decoration-dotted cursor-pointer"
              href={`mailto:${GDPR_EMAIL}`}
            >
              <span className="text-sm">{GDPR_EMAIL}</span>
            </Link>
            .
          </p>
          <p className="text-sm font-noto font-bold mt-3">
            {`${userFirstName}, are you sure you want to close your People for Research account?`}
          </p>
        </ModalBody>
        <ModalFooter className="flex flex-col lg:flex-row lg:justify-between gap-2">
          <Button
            btnLabel="Go back to profile"
            customVariant="transparent-black"
            startContent={<FaChevronLeft />}
            onClick={onClose}
          />
          <Button
            btnLabel="Yes, I want to close my account"
            className="bg-red-500 hover:bg-red-600 text-white"
            endContent={<FaCheck />}
            onClick={onClickDelete}
          />
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}

export default CloseAccountModal;