import React, { useState } from "react";
import PropTypes from "prop-types";
import uploadIcon from "../../assets/images/upload.png";

const ApplyForAdFourthStage = ({
  coverLetter,
  setCoverLetter,
  pdfFile,
  setPdfFile,
  onDecreaseStage,
  onFinishedFourStages,
}) => {
  const [dropzoneActive, setDropzoneActive] = useState(false);

  const disabled = pdfFile === null || coverLetter === "";

  const handleDrop = (e) => {
    e.preventDefault();
    setPdfFile(e.dataTransfer.files[0]);
  };

  return (
    <div>
      <div className="apply-for-ad-modal-form-control">
        <label>CV</label>
        <div
          className="uploadCV-input"
          onDragOver={(e) => {
            setDropzoneActive(true);
            e.preventDefault();
          }}
          onDragLeave={(e) => {
            setDropzoneActive(false);
            e.preventDefault();
          }}
          onDrop={(e) => handleDrop(e)}
          style={{
            backgroundColor: dropzoneActive ? "#F4F4F4" : "#ffffff",
          }}
        >
          <div className="uploadCV-input-sub-container">
            <img src={uploadIcon} />
            <div className="uploadCV-input-sub-container">
              {pdfFile !== null ? (
                <p>{pdfFile.name}</p>
              ) : (
                <>
                  <p>
                    Prevuci .pdf dokument u ovom delu ekrana ili &nbsp;
                    <label
                      htmlFor="upload-file"
                      style={{
                        cursor: "pointer",
                        textDecoration: "underline",
                        color: "#1E92D0",
                      }}
                    >
                      Pretrazi
                    </label>
                    &nbsp;na racunaru
                  </p>
                  <input
                    type="file"
                    name="photo"
                    id="upload-file"
                    style={{ display: "none", zIndex: -1 }}
                    value={pdfFile}
                    onChange={(e) => {
                      console.log("Ovde smo");
                      setPdfFile(e.target.files[0]);
                    }}
                  />
                </>
              )}
            </div>
          </div>
        </div>
      </div>
      <div className="apply-for-ad-modal-form-control">
        <label>Propratno pismo (Opciono)</label>
        <textarea
          value={coverLetter}
          onChange={(e) => setCoverLetter(e.target.value)}
          placeholder="ex. Kao student Elektronskog fakulteta u Nišu..."
          rows={5}
        ></textarea>
      </div>
      <div className="apply-for-ad-buttons">
        <button onClick={onDecreaseStage}>NAZAD</button>
        <button disabled={disabled} onClick={onFinishedFourStages}>
          PRIJAVI SE
        </button>
      </div>
    </div>
  );
};

ApplyForAdFourthStage.propTypes = {
  coverLetter: PropTypes.string,
  setCoverLetter: PropTypes.any,
  pdfFile: PropTypes.any,
  setPdfFile: PropTypes.any,
  onDecreaseStage: PropTypes.func,
  onFinishedFourStages: PropTypes.func,
};

export default ApplyForAdFourthStage;
