import { Modal, TalentButton, Typography } from "@komi-app/components";
import { useState } from "react";
import { OneSchemaContactImporter } from "./OneSchemaContactImporter";
import { ContactImportStep } from "./Types";

export interface ImportModuleProps {
  setModuleOpen: (isOpen: boolean) => void;
  setIsContactImportButtonDisabled: (inProgress: boolean) => void;
}

const ImportModule = ({
  setModuleOpen,
  setIsContactImportButtonDisabled,
}: ImportModuleProps) => {
  /**
   * State to keep track of the current step in the import process.
   */
  const [currentStep, setCurrentStep] = useState<ContactImportStep>(
    ContactImportStep.Consent
  );

  /**
   * returns the content for the Consent step.
   * @returns JSX.Element
   */
  const getMarketingStepContent = () => {
    return (
      <>
        <Typography.Heading className="m__b--8 p__t--0" level={3}>
          You Need to Agree to Komi’s Terms of Use Before Proceeding
        </Typography.Heading>

        <Typography.Body className="m__t--8 m__b--16" level={1}>
          Do you agree to upload and utilize any contacts in accordance with
          Komi’s{" "}
          <a
            href={"https://komi.io/talent-terms"}
            className="typography-body level-1"
            target="_blank"
            rel="noopener noreferrer"
          >
            Terms of Use
          </a>
          , including but not limited to having appropriate marketing
          permissions?
        </Typography.Body>

        <div className="confirmation-modal__buttons m__t--24">
          <TalentButton
            variant="secondary"
            style={{ width: "160px" }}
            onClick={() => {
              setModuleOpen(false);
              setIsContactImportButtonDisabled(false);
            }}
          >
            Cancel
          </TalentButton>
          <TalentButton
            variant="primary"
            style={{ width: "160px" }}
            onClick={() => setCurrentStep(ContactImportStep.Import)}
          >
            I Agree
          </TalentButton>
        </div>
      </>
    );
  };

  return (
    <div>
      {currentStep === ContactImportStep.Consent && (
        <Modal
          width={540}
          className="komi-modal contacts-import-modal"
          visible={true}
          closeIcon={false}
        >
          {getMarketingStepContent()}
        </Modal>
      )}
      {currentStep === ContactImportStep.Import && (
        <OneSchemaContactImporter
          setIsImporterOpen={setModuleOpen}
          setIsContactImportButtonDisabled={setIsContactImportButtonDisabled}
        />
      )}
    </div>
  );
};
export default ImportModule;
