import background from '../../../../public/assets/homepage/background.svg'
import add from '../../../../public/assets/tuteur/add.svg'
import { Menu } from '@/components/menu'
import { yupResolver } from '@hookform/resolvers/yup';
import { ThemeProvider} from "@mui/material";
import { useEffect, useRef, useState } from "react";
import { colorTheme } from '@/components/styles/mui';
import { Loading } from '@/components/loader';
import FormationFilter from '@/components/formations/formationsFilter';
import FormationForm from '@/components/formations/formationsForm';
import { schemaFormations } from '../../../../public/assets/yup';
import { H1Title, Back, PictoButton } from '@/components/littleComponents';
import { GETRequest } from '@/utils/requestHeader';
import { NoIndexHead } from '@/utils/customHead';

const API_URL = process.env.NEXT_PUBLIC_API_URL

export async function getServerSideProps({req, res, query}) {
    const Cookies = require('cookies')
    const cookies = new Cookies(req, res)
    const authToken = cookies.get('auth-token') || ''
  
    const response = await fetch(`${API_URL}/api/auth/me/admin`, {
      method:'GET',
      mode: "cors",
      headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${authToken}`
      }
    })
    
    if(response.status !== 200) {
      return { 
        redirect: {
          destination: '/admin',
          permanent: false,
        },
    }}

    const formation = await fetch(`${API_URL}/api/formations/${query.profil}`, GETRequest).then(r => r.json())
    for(const property in formation) {
        if(formation[property] === null) {
            formation[property] = ''
        }
    }
    const selected_form = {...formation.descriptions_lines, ...formation}
    return {
        props: {
          formation:selected_form
        }
    }
  }

export default function EditFormation({formation}) {
    const [searchResultFormations, setSearchResultFormations] = useState([])
    const [formationsData, setFormationsData] = useState()
    const [loading, setLoading] = useState(false)
    const filterBox = useRef(null)

    useEffect(() => {
        !formation || formation.message  ? '' : setFormationsData(formation)
    }, [formation])

    return (
      <>
      <NoIndexHead />
      <main className='w-[100vw] min-h-[100vh] bg-cover bg-center flex'
            style={{backgroundImage:`url(${background.src})`}}
            onClick={(e) => { if (filterBox.current && !filterBox.current.contains(e.target)) {setSearchResultFormations([])} }}>
              <Menu />
              <section className='w-full p-14 ml-[250px] flex flex-col'>
                  <div className='flex gap-3'>
                      <Back title="Retour à la liste" linkTo='/admin/formations' />
                      <PictoButton image={add} linkTo='/admin/formations/new' />
                  </div>
                  <H1Title title='MODIFIER UNE FORMATION' />
                  <form className='w-full gap-10 bg-white py-8 px-12 items-center justify-items-center rounded-xl mb-5'
                      ref={filterBox}>
                      <ThemeProvider theme={colorTheme}>
                          <FormationFilter searchResultFormations={searchResultFormations} setSearchResultFormations={setSearchResultFormations} setFormationsData={setFormationsData}/>
                      </ThemeProvider>
                  </form>
              
              {loading 
                  ? <Loading />
                  : <FormationForm  
                      setLoading={setLoading}
                      formResolver={{resolver: yupResolver(schemaFormations)}} 
                      searchFormationsData={formationsData} setSearchFormationsData={setFormationsData} 
                      validationButton="MODIFIER" api={`formations/${formationsData?.id}`} />
              }
              </section>
      </main>
      </>
    )
}