import { Skeleton } from "@mui/material";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { useFormatDate } from "../../../../hooks/useFormatDate";
import { useGetJobDetails } from "../../../../utils/hooks";
import JobSkills from "../../../candidate/JobSkills";
import CompanyInfo from "../../../job-details/CompanyInfo";
import JobDetailsDescriptions from "../../../job-details/JobDetailsDescriptions";
import JobOverView from "../../../job-details/JobOverview";

export const ViewPostedJob = () => {
  const router = useRouter();
  const [getCompanyDetails, setCompanyDetails] = useState<JobDetails>();
  const [getIsLoading, setIsLoading] = useState<boolean>();
  const id = router.query.jobId;

  useEffect(() => {
    getJobDetails();

    // clear state on unmount
    return () => {
      setCompanyDetails({
        id: null,
        title: "",
        description: "",
        openingDate: "",
        closingDate: "",
        companyId: null,
        industryId: null,
        createdAt: "",
        updatedAt: "",
        companyLogo: null,
        location: "",
        salary: "",
        skills: [],
        isDraft: false,
        company: {
          name: "",
          website: "",
          contactEmail: "",
          contactPhone: "",
          foundationDate: "",
          id: 0,
          description: "",
          contactPerson: "",
          employeeCount: 0,
          userId: 0,
          createdAt: "",
          updatedAt: "",
          location: "",
        },
      });
    };
  }, [id]);

  const getJobDetails = async () => {
    setIsLoading(true);
    if (id) {
      const { resp, status } = (await useGetJobDetails(id)) as JobDetailsResp;
      setCompanyDetails(resp);
    }
    setIsLoading(false);
  };

  return (
    <section className="job-detail-section">
      <div className="upper-box">
        <div className="auto-container">
          <div className="job-block-seven">
            <div className="inner-box">
              {getIsLoading && (
                <div className="content">
                  <span className="company-logo">
                    <Skeleton variant="rectangular" width={70} height={70} />
                  </span>
                  <Skeleton variant="text" sx={{ fontSize: "40rem" }} />

                  <ul className="job-info">
                    <li>
                      <Skeleton variant="rectangular" width={30} height={30} />
                    </li>
                    <li>
                      <Skeleton variant="rectangular" width={30} height={30} />
                    </li>
                    <li>
                      <Skeleton variant="rectangular" width={30} height={30} />
                    </li>
                    <li>
                      <Skeleton variant="rectangular" width={30} height={30} />
                    </li>
                  </ul>
                </div>
              )}

              {!getIsLoading && (
                <div className="content">
                  <span className="company-logo">
                    <img
                      src={
                        process.env.NEXT_PUBLIC_NODE_ENV === "development"
                          ? `http://localhost:3333/${getCompanyDetails?.companyLogo}`
                          : `${process.env.NEXT_PUBLIC_BASE_URL}/${getCompanyDetails?.companyLogo}`
                      }
                      alt="logo"
                      onError={(e) => {
                        e.currentTarget.onerror = null;
                        e.currentTarget.src = "/images/human_capital_logo.png";
                      }}
                    />
                  </span>
                  <h4>{getCompanyDetails?.title}</h4>

                  <ul className="job-info">
                    <li>
                      <span className="icon flaticon-briefcase"></span>
                      {getCompanyDetails?.company?.name}
                    </li>
                    <li>
                      <span className="icon flaticon-map-locator"></span>
                      {getCompanyDetails?.location}
                    </li>
                    <li>
                      <span className="icon flaticon-clock-3"></span>{" "}
                      {useFormatDate(getCompanyDetails?.createdAt)}
                    </li>
                    <li>
                      <span className="icon flaticon-money"></span>
                      {getCompanyDetails?.salary}
                    </li>
                  </ul>
                </div>
              )}

              <div className="btn-box">
                <Link
                  href={`/dashboard/manage-jobs/${id}/edit`}
                  className="theme-btn btn-style-one"
                >
                  Edit this Job
                </Link>
              </div>
            </div>
          </div>
          {/* <!-- Job Block --> */}
        </div>
      </div>
      {/* <!-- Upper Box --> */}

      <div className="job-detail-outer">
        <div className="auto-container">
          <div className="row">
            <div className="content-column col-lg-8 col-md-12 col-sm-12">
              {getCompanyDetails?.description && (
                <JobDetailsDescriptions jobDetails={getCompanyDetails as any} />
              )}
              {/* End jobdetails content */}

              {/* <div className="other-options">
                    <div className="social-share">
                      <h5>Share this job</h5>
                      <JobSocial socialContent={socialContent} />
                    </div>
                  </div> */}
            </div>
            {/* End .content-column */}

            <div className="sidebar-column col-lg-4 col-md-12 col-sm-12">
              <aside className="sidebar">
                <div className="sidebar-widget">
                  {/* <!-- Job Overview --> */}
                  <h4 className="widget-title">Job Overview</h4>

                  {getCompanyDetails && (
                    <JobOverView getCompanyDetails={getCompanyDetails} />
                  )}

                  <div className="py-3"></div>
                  <h4 className="widget-title">Job Skills</h4>
                  <div className="widget-content">
                    <JobSkills skills={getCompanyDetails?.skills!} />
                  </div>
                  {/* <!-- Job Skills --> */}
                </div>
                {/* End .sidebar-widget */}

                <div className="sidebar-widget company-widget">
                  <div className="widget-content">
                    <div className="company-title">
                      <div className="company-logo">
                        <img
                          src={`${process.env.NEXT_PUBLIC_BASE_URL}/${getCompanyDetails?.companyLogo}`}
                          alt="logo"
                          onError={(e) => {
                            e.currentTarget.onerror = null;
                            e.currentTarget.src =
                              "/images/human_capital_logo.png";
                          }}
                        />
                      </div>
                      <h5 className="company-name">
                        {getCompanyDetails?.company?.name}
                      </h5>
                    </div>
                    {/* End company title */}

                    <CompanyInfo company={getCompanyDetails?.company!} />
                  </div>
                </div>
                {/* End .company-widget */}
              </aside>
              {/* End .sidebar */}
            </div>
            {/* End .sidebar-column */}
          </div>
        </div>
      </div>
      {/* <!-- job-detail-outer--> */}
    </section>
  );
};