import "./JobAdDetails.css"
import {useEffect, useState} from "react";
import {useDispatch, useSelector} from "react-redux";
import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
import {useParams} from "react-router";
import Roles from "../../enumerations/Roles";
import JobType from "../../enumerations/JobType";
import EmploymentStatus from "../../enumerations/EmploymentStatus";
import {formatRelativeTime} from "../../utils/utils";
import {AddJobAdModal} from "./AddJobAdModal";
import {ApplyToJobAdModal} from "../applications/ApplyToJobAdModal";


export const JobAdDetails = () => {
    const dispatch = useDispatch();
    const [jobAd, setJobAd] = useState("")
    const [recruiterDetails, setRecruiterDetails] = useState("");
    const [role, setRole] = useState("")
    const {id} = useParams();
    const auth = useSelector(state => state.auth.currentUser);

    useEffect(() => {
        setRole(auth.role)
    }, [auth])


    useEffect(() => {
        JobAdvertisementActions.fetchJobAdvertisementById(id, (success, response) => {
            if (success) {
                setJobAd(response.data)
                JobAdvertisementActions.fetchRecruiterDetailsById(response.data.recruiterId, (successAgain, responseAgain) => {
                    if(successAgain) {
                        setRecruiterDetails(responseAgain.data)
                    }
                })
            }
        });
    }, [])
    return (<div className="container">
        <div className="row">
            <div className="col-md-9">
                <div className="details-wrap">

                    <div className="title">
                        <h2>{jobAd.title} </h2>
                        <span className="job-type"> {jobAd.jobType===JobType.JOB ? "Job" : "Internship"}</span>
                        {!jobAd.active && <span className="expired">Expired</span>}
                    </div>

                    <p className="details-head-info">
                        <span><b>{jobAd.recruiterName}</b></span> • <span>{jobAd.industry}</span> • <span>{formatRelativeTime(jobAd.postedOn)}</span>
                    </p>

                    <p><i className="fa-solid fa-money-check-dollar"></i> <span>Hourly rate: ${jobAd.startingSalary}</span></p>
                    <p><i className="fa-solid fa-briefcase"></i> Employment status: {jobAd.employmentStatus==="FULL_TIME" ? "Full-time" : "Part-time"}</p>
                    <p><i className="fa-solid fa-calendar-days"></i> Active until: {new Date(jobAd.activeUntil).toLocaleString('default', { day: 'numeric', month: 'long',  year: 'numeric' })}</p>

                    <h4>About the job</h4>
                    {jobAd.description && (
                        <p dangerouslySetInnerHTML={{ __html: jobAd.description.replace(/\n/g, "<br>") }}></p>
                    )}
                    <ApplyToJobAdModal jobAd={jobAd} role={role}/>

                </div>
            </div>
            <div className="col-md-3">
                <div className="details-wrap">
                    <h3>{jobAd.recruiterName}</h3>

                    {/*TO DO - AFTER IMPLEMENTING FORM FOR UPDATING PERSONAL INFO*/}
                    <h4>About the company</h4>
                    <p>
                        For over two decades, we have been harnessing technology to drive meaningful change.  Working side by side with leading brands, we build strategies, products and solutions tailored to unique needs –regardless of industry, region or scale. By combining world-class engineering, industry expertise and a people-centric mindset, we consult and partner with our customers to create technological solutions that drive innovation and transform businesses.
                        <br/><br/>
                        From ideation to production, we support our customers with bespoke solutions across various industries, including payments, insurance, finance and banking, technology, media and entertainment, telecommunications, retail and consumer goods, supply chain and logistics, healthcare and life sciences, energy and resources, government, automotive and travel.

                    </p>
                    <p><span><i className="fa-solid fa-envelope"></i> {recruiterDetails.email}</span> • <span>
                <i className="fa-solid fa-phone"></i> {recruiterDetails.phoneNumber}</span>
                    </p>
                </div>
            </div>

        </div>



    </div>)
}