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 TutorFilter from '@/components/tutors/tutorFilter';
import TutorForm from '@/components/tutors/tutorForm';
import { schemaTutor } 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 tutor = await fetch(`${API_URL}/api/tutors/${query.profil}`, GETRequest).then(r => r.json())
  for(const property in tutor) {
      if(tutor[property] === null) {
        tutor[property] = ''
      }
  }
  const selected_tutor = {...tutor.address, ...tutor}
  return {
      props: {
        tut:selected_tutor
      }
  }
}

export default function EditTutor({tut}) {
    const [searchResultTutors, setSearchResultTutors] = useState([])
    const [searchResult, setSearchResult] = useState([])
    const [tutorData, setTutorData] = useState()
    const [loading, setLoading] = useState(false)

    const filterBox = useRef(null)

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

  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)) {setSearchResult([]); setSearchResultTutors([])} }}>
            <Menu />
            <section className='w-full p-14 ml-[250px] flex flex-col'>
                <div className='flex gap-3'>
                    <Back title="Retour à la liste" linkTo='/admin/tuteurs' />
                    <PictoButton image={add} linkTo='/admin/tuteurs/new' />
                </div>
                <H1Title title='MODIFIER UN TUTEUR' />
                <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}>
                        <TutorFilter searchResultTutors={searchResultTutors} setSearchResultTutors={setSearchResultTutors} setTutorData={setTutorData} />
                    </ThemeProvider>
                </form>
            
            {loading 
                ? <Loading />
                : <TutorForm  
                    searchResult={searchResult} setSearchResult={setSearchResult} 
                    setLoading={setLoading}
                    formResolver={{resolver: yupResolver(schemaTutor)}} 
                    searchTutorData={tutorData} setSearchTutorData={setTutorData} 
                    validationButton="MODIFIER" api={`tutors/${tutorData?.id}`} />
            }
            </section>
    </main>
    </>
  )
}