import React, { useEffect, useState } from "react";
import { useFormatDate } from "../../../../hooks/useFormatDate";
import { useGetCandidateProfileDetails } from "../../../../utils/hooks/useGetCandidateProfileDetails";

const CV = React.forwardRef((props: any, ref: any) => {
  const [profileDetails, setProfileDetails] =
    useState<CandidateProfileDetails>();
  const FetchCandidatesDetails = async () => {
    try {
      const { resp } =
        (await useGetCandidateProfileDetails()) as CandidateProfileDetailsResp;

      setProfileDetails(resp);
    } catch (error) {
      console.error(
        "Error Occurred when fetching the candidate account details",
        error
      );
    }
  };

  useEffect(() => {
    FetchCandidatesDetails();
  }, []);

  return (
    <div ref={ref} className="CV_wrapper">
      <div className="container">
        <div className="leftPanel">
          <img
            alt="avatar"
            className="thumb"
            src={
              profileDetails?.profilePictureUrl
                ? profileDetails?.profilePictureUrl
                : "/images/human_capital_logo.png"
            }
            width={50}
            height={50}
            onError={(e: any) => {
              e.target.src = "/images/human_capital_logo.png";
              e.target.onerror = null;
            }}
          />
          <div className="details">
            <div className="item bottomLineSeparator">
              <h2>CONTACT</h2>
              <div className="smallText">
                <p className="text-white">
                  <i
                    className=" me-2 fa fa-phone contactIcon"
                    aria-hidden="true"
                  ></i>
                  {props.getCVData?.phone}
                </p>
                <p className="text-white">
                  <i
                    className=" me-2 fa fa-envelope contactIcon"
                    aria-hidden="true"
                  ></i>
                  <a
                    className="text-white overflow-break-word"
                    href={`mailto:${props.getCVData?.email}`}
                  >
                    {props.getCVData?.email}
                  </a>
                </p>
                <p className="text-white">
                  <i
                    className=" me-2 fa fa-map-marker contactIcon"
                    aria-hidden="true"
                  ></i>
                  {`${props.getCVData?.state && JSON.parse(props.getCVData?.state)?.name}, ${props.getCVData?.country && JSON.parse(props.getCVData?.country)?.name}`}
                </p>
                {props.getCVData?.onlineProfile.map((profile: any) => (
                  <p className="text-white">
                    <a
                      className="text-theme-color overflow-break-word"
                      href={profile?.profileUrl}
                    >
                      {profile?.profileUrl}
                    </a>
                  </p>
                ))}
              </div>
            </div>
            <div className="item bottomLineSeparator">
              <h2>SKILLS</h2>
              <div className="smallText">
                {props.getCVData?.skills.map((skill: skillSelect) => (
                  <div className="skill">
                    <div>
                      <span className="skill_span">{skill.label}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="item">
              <h2>EDUCATION</h2>
              {props.getCVData?.education.map((profieducationle: any) => (
                <div className="smallText text-white mb-3">
                  <span className="d-block bolded white text-white mb-0">
                    {profieducationle?.degreeLevel}
                  </span>
                  <span className="d-block bolded white text-white mb-0">
                    {profieducationle?.degreeTitle}
                  </span>
                  <span className="d-block text-white mb-0">
                    {profieducationle?.institute}
                  </span>
                  <span className="d-block text-white mb-0">
                    {profieducationle?.year} | {profieducationle?.result}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="rightPanel">
          <div>
            <h1>
              {`${props.getCVData?.firstName} ${props.getCVData?.lastName}`}
            </h1>
            <div className="smallText">
              <h3 className="py-3">{props.getCVData?.designation}</h3>
              <div>
                <h2>About me</h2>
                <div className="smallText">
                  <p>{props.getCVData?.about}</p>
                </div>
              </div>
              <div className="workExperience">
                <h2>Work experience</h2>
                <ul>
                  {props.getCVData?.experence.map((experiences: any) => (
                    <li>
                      <div className="jobPosition">
                        <span className="bolded">
                          {/* Accountant */}
                          {experiences?.experienceTitle}
                        </span>
                        <span style={{ width: "200px", textAlign: "right" }}>
                          {/* Jun 2014 - Sept 2015  */}
                          {useFormatDate(experiences?.startDate)} -{" "}
                          {experiences.endDate
                            ? useFormatDate(experiences.endDate)
                            : "Present"}
                        </span>
                      </div>
                      <div className="projectName ">
                        <span>
                          {experiences?.company} <br />
                          {experiences?.description}
                        </span>
                      </div>
                      <div className="text"></div>
                    </li>
                  ))}
                </ul>
              </div>
              <div className="workExperience">
                <h2>Projects</h2>
                <ul>
                  {props.getCVData?.projects.map((project: any) => (
                    <li>
                      <div className="jobPosition">
                        <span className="bolded">
                          {/* Accountant */}
                          {project?.projectTitle}
                        </span>
                      </div>
                      <div className="projectName ">
                        <span>{project?.projectDetails}</span>
                      </div>
                      <div className="text"></div>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
});

export default CV;