import React, { useState } from "react";
import { TalentButton } from "@komi-app/components";
import { CardButton } from "components/CardButton/CardButton";

import { TemplateImportMethod } from "../../types";

import { noop } from "utils/noop";

import classnames from "classnames";
import "./ImportedTemplateMethodStep.scss";

export interface ImportedTemplateModalProps
  extends React.HTMLProps<HTMLDivElement> {
  onMethodSelected: (method: TemplateImportMethod) => void;
  onCancel: () => void;
}

export const ImportedTemplateMethodStep: React.FC<
  ImportedTemplateModalProps
> = ({ className, onMethodSelected, onCancel = noop }) => {
  const [selectedTemplateOption, setSelectedTemplateOption] = useState(
    TemplateImportMethod.UploadFile
  );

  const classNames = classnames(className, "imported-template--modal__options");
  const getOptionClassName = (option: TemplateImportMethod) =>
    classnames("imported-template--modal__options-upload", {
      "card-button--selected": selectedTemplateOption === option,
    });

  const handleFileUploadClick = () => {
    setSelectedTemplateOption(TemplateImportMethod.UploadFile);
  };
  const handlePasteInCodeClick = () => {
    setSelectedTemplateOption(TemplateImportMethod.PasteInCode);
  };
  const handleMethodSelection = () => {
    onMethodSelected(selectedTemplateOption);
  };

  return (
    <React.Fragment>
      <div className={classNames}>
        <CardButton
          className={getOptionClassName(TemplateImportMethod.UploadFile)}
          icon="file"
          title="Upload a File"
          description="Upload your email template as an HTML file"
          onClick={handleFileUploadClick}
          data-testid="upload-file-button"
        />
        <CardButton
          className={getOptionClassName(TemplateImportMethod.PasteInCode)}
          icon="code"
          title="Paste in Code"
          description="Paste the HTML code for your custom template into the editor directly"
          onClick={handlePasteInCodeClick}
          data-testid="past-in-code-button"
        />
      </div>

      <div className="imported-template--modal__buttons">
        <TalentButton
          className="imported-template--modal__buttons-cancel"
          variant="secondary"
          onClick={onCancel}
        >
          Cancel
        </TalentButton>
        <TalentButton
          className="imported-template--modal__buttons-next"
          variant="primary"
          onClick={handleMethodSelection}
        >
          Next
        </TalentButton>
      </div>
    </React.Fragment>
  );
};
