'use client'

import Image from "next/image";
import ImageTrabalheConosco from "../../../../../../public/assets/Images/ImageTrabalheConosco/trabalheConosco.png";
import {Inter} from "next/font/google";
import {maskMoney} from "@/utils/functions";
import Link from "next/link";
import {useParams} from "next/navigation";
import {useEffect, useState} from "react";
import {getJobs} from "@/actions/pageWorkTous";
import {Jobs} from "@/utils/Interfaces/interfaceTrabalheConosco";
import {useWebContext} from "@/app/(site)/providers";

const inter = Inter({
    subsets: ['latin'],
    display: 'swap',
})

export default function Page() {
    const {isMobile} = useWebContext();
    const {slug} = useParams<{ slug: string[] }>();
    const [job, setJobs] = useState<Jobs>({} as Jobs)

    useEffect(() => {

        if (slug) {
            (async () => {
                let res = await getJobs(`Id=${slug}`)
                setJobs(res[1]);
            })()
        }

    }, [slug]);

    return (
        <>
            {!isMobile &&
                <section className="container mx-auto lg:p-8 lg:pb-0 lg:mt-10">
                    <div className="flex justify-between items-center">
                        <div className="w-[488px]">
                            <h1 className="text-grandstander uppercase text-[56px] text-plamev-blue-500 leading-[56px]">faça
                                parte do time plamev.</h1>
                            <p className={`${inter.className} text-[16px] text-plamev-dark-400`}>As vagas disponíveis
                                estão
                                listadas abaixo, escolha a que você melhor se encaixa e envie-nos
                                seu currículo.</p>
                        </div>

                        <div className="w-[50%] flex justify-end">
                            <Image
                                src={ImageTrabalheConosco}
                                alt="faça parte do time plamev"
                            />
                        </div>
                    </div>
                </section>
            }

            {isMobile &&
                <section className="container mx-auto lg:p-8 lg:pb-0 lg:mt-10">
                    <div className="flex flex-col justify-between items-center">
                        <div className="w-[100%] flex justify-end">
                            <Image
                                src={ImageTrabalheConosco}
                                alt="faça parte do time plamev"
                            />
                        </div>

                        <div className="w-[343px] mt-[32px]">
                            <h1 className="text-grandstander uppercase text-[40px] text-plamev-blue-500 text-center leading-[40px]">
                                faça parte do time plamev.
                            </h1>
                            <p className={`${inter.className} text-[16px] text-center text-plamev-dark-400`}>
                                As vagas disponíveis estão listadas abaixo, escolha a que você melhor se encaixa e
                                envie-nos seu currículo.
                            </p>
                        </div>
                    </div>
                </section>
            }

            {!isMobile &&
                <div className="w-[800px] m-auto border-b-[2px] border-dashed mt-[35px] pb-[35px]">
                    <h2 className="text-poppins text-[32px] font-bold text-plamev-blue-500 mb-[1rem]">
                        {job.Nome}
                    </h2>

                    <h3 className="text-poppins text-[18px] font-bold text-plamev-blue-500 mb-[1rem]">
                        {job.CargosNome}
                    </h3>

                    {job.SalarioInicial &&
                        <p className="mb-[1rem]">
                            <b>Salário:</b>
                            {job.SalarioFinal && Number(job.SalarioFinal) > 0 && ' De '}
                            {Number(job.SalarioInicial) > 0 ? ' R$' + maskMoney(Number(job.SalarioInicial)) : ''}
                            {Number(job.SalarioFinal) > 0 ? ' até R$' + maskMoney(Number(job.SalarioFinal)) : ''}
                        </p>
                    }

                    <p className="mb-[1rem]"><b>Qtd. vagas:</b> {job.Quantidade}</p>

                    <p><b>Detalhes da vaga:</b></p>
                    <div className="mb-[1rem] text-justify [&_p]:mb-[1rem] [&_p:last-child]:mb-0" dangerouslySetInnerHTML={{__html: job.DescricaoCompleta}}></div>

                    <div className="flex gap-5">
                        <Link
                            href={`/trabalhe-conosco`}
                            className=" bg-plamev-dark-50 text-plamev-blue-800 w-[219px] h-[54px] flex justify-center items-center rounded-[8px]"
                        >
                            Voltar
                        </Link>

                        <Link
                            href={`/trabalhe-conosco/cadastro/${job.Id}`}
                            className=" bg-plamev-blue-500 text-plamev-blue-50 w-[219px] h-[54px] flex justify-center items-center rounded-[8px]"
                        >
                            Cadastrar para a vaga
                        </Link>
                    </div>
                </div>
            }

            {isMobile &&
                <div className="w-[327px] border-b-[2px] m-auto border-dashed mt-[35px] pb-[35px]">
                    <h2 className="text-poppins text-[32px] font-bold text-plamev-blue-500 mb-[1rem]">
                        {job.Nome}
                    </h2>

                    <h3 className="text-poppins text-[18px] font-bold text-plamev-blue-500 mb-[1rem]">
                        {job.CargosNome}
                    </h3>

                    {job.SalarioInicial &&
                        <p className="mb-[1rem]">
                            <b>Salário:</b>
                            {job.SalarioFinal && Number(job.SalarioFinal) > 0 && ' De '}
                            {Number(job.SalarioInicial) > 0 ? ' R$' + maskMoney(Number(job.SalarioInicial)) : ''}
                            {Number(job.SalarioFinal) > 0 ? ' até R$' + maskMoney(Number(job.SalarioFinal)) : ''}
                        </p>
                    }

                    <p className="mb-[1rem]"><b>Qtd. vagas:</b> {job.Quantidade}</p>

                    <p><b>Detalhes da vaga:</b></p>
                    <div className="mb-[1rem] text-justify [&_p]:mb-[1rem] [&_p:last-child]:mb-0" dangerouslySetInnerHTML={{__html: job.DescricaoCompleta}}></div>

                    <div className="flex flex-col gap-5">
                        <Link
                            href={`/trabalhe-conosco`}
                            className=" bg-plamev-dark-50 text-plamev-blue-800 w-[100%] h-[54px] flex justify-center items-center rounded-[8px]"
                        >
                            Voltar
                        </Link>

                        <Link
                            href={`/trabalhe-conosco/cadastro/${job.Id}`}
                            className=" bg-plamev-blue-500 text-plamev-blue-50 w-[100%] h-[54px] flex justify-center items-center rounded-[8px]"
                        >
                            Cadastrar para a vaga
                        </Link>
                    </div>
                </div>
            }
        </>
    )
}