import JobPage from "@/components/layout/JobPage";
import { useParams } from "react-router-dom";
import appApi from "@/api/app";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useStore } from "@/store";
export default function CampusDetail() {
    const locale = useStore((s) => s.locale);
    const params = useParams();
    const id = params.id as string;
    const [jobDetail, setJobDetail] = useState<any>(null);
    const localJobDetail = useMemo(() => {
        return jobDetail?.find((item: any) => item.lang.toLowerCase() === locale.split('-')[0]);
    }, [jobDetail, locale]);

    const getJobDetail = useCallback(() => {
        appApi.getJobDetail(id).then((res) => {
            const items = res.data.map((item:any) => {
                return {
                    title: item.title,
                    jobType: item.category.job_type_name,
                    businessArea: item.category.job_area_name,
                    businessPlate: item.category.job_unit_name,
                    recruitNumber: item.recruit_count,
                    jobLocation: item.city,
                    content: item.description,
                    requirement: item.requirement,
                    lang: item.lang,
                    contact: item.contact,
                }
            });
            setJobDetail(items);
        })
    }, [id])

    useEffect(() => {
        getJobDetail()
    }, [])
    return (
        <div>
            {
                localJobDetail &&
                <JobPage data={localJobDetail} />
            }
        </div>
    )
}