import { TutorMenu } from '@/components/menus/tutorMenu'
import PasswordForm from "@/components/account/passwordForm";
import MailForm from "@/components/account/mailForm";
import Image from 'next/image';

import { DashboardTitle } from '@/components/titleDashboard'
import accountPix from '../../../../public/assets/dashboard/whitePicto/account.svg'
import bgClient from '../../../../public/assets/dashboard/bgClient.svg'
import { Unsubscribe } from '@/components/unsubscribe';
import { useState } from 'react';
import { lock } from '@/utils/lockScreen';
import { NoIndexHead } from '@/utils/customHead';

const API_URL = process.env.NEXT_PUBLIC_API_URL

export async function getServerSideProps ({req, res}) {
  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/tutors`, {
    method:'GET',
    mode: "cors",
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${authToken}`
    }
  })
  
  if(response.status !== 200) {
    return { 
      redirect: {
        destination: '/tuteur/',
        permanent: false,
      },
  }}

  const tutor = await response.json()

  return {
    props: {
      tutorId:tutor.id,
      tutorMail: tutor.email
    }
  }
}

export default function TutorAccount({tutorId, tutorMail}) {
  const [unsub, setUnsub] = useState(false)

  return (
    <>
    <NoIndexHead />
    <main className='w-[100vw] bg-cover bg-center flex'>
        <Unsubscribe unsub={unsub} setUnsub={setUnsub} email={tutorMail} api='tutors' id={tutorId} />
            <TutorMenu id={tutorId} />
            <section className='w-full min-h-[100vh] flex justify-center px-20 ml-[320px] flex-col gap-10'>
                <Image src={bgClient} alt="Big pictogram" className='absolute -z-10 bottom-0 right-0'/>
                <DashboardTitle text='Votre compte' image={accountPix}/>
                <section className="flex w-full rounded-xl py-20 px-10 justify-evenly bg-white gap-x-16 xl:grid-cols-1 justify-items-center xl:gap-y-10">
                  <div className="w-[380px] xl:col-start-1 xl:w-[500px] sm:w-[400px] 2sm:w-[100vw] 2sm:px-3">
                    <PasswordForm apiPath='tutors' id={tutorId} />
                  </div>
                  <div className="col-start-2 w-[380px] xl:col-start-1 xl:w-[500px] xl:mt-0 sm:w-[400px] 2sm:w-[100vw] 2sm:px-3">
                    <MailForm apiPath='tutors' id={tutorId}/>
                  </div>
                </section>
                <section className='place-self-center'>
                    <button onClick={() => {setUnsub(true); lock()}} className='border-2 border-red-400 text-red-500 py-2 px-4 rounded-xl transition-all duration-300 hover:text-white hover:bg-red-400'>Se désinscrire</button>
                </section>
            </section>
    </main>
    </>
  )
}