import { useState } from "react";
import { useForm } from "react-hook-form";
import { Button, ThemeProvider} from "@mui/material";
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
import Image from "next/image";
import { colorTheme } from "@/components/styles/mui";
import Close from "../../../public/assets/dashboardTutors/close.svg"
import { Loading } from "@/components/loader";
import { unlock } from "@/utils/lockScreen";
import { POSTRequest, GETRequest } from "@/utils/requestHeader";
import parseISO from "date-fns/parseISO";
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { dateToHyphenDate, hourToHyphenHour } from "@/utils/timeToHours";
import { addMinutes } from 'date-fns';
import fr from 'date-fns/locale/fr';

const API_URL = process.env.NEXT_PUBLIC_API_URL

export function AddSeance ({addTime, setAddTime, order, position}) {
    const { v4: uuidv4 } = require('uuid');
    const {handleSubmit} = useForm ()
    const [logErr, setlogErr] = useState(false)
    const [loading, setLoading] = useState(false)
    const [begin, setBegin] = useState(parseISO(0));

    async function onSubmit() {
        setlogErr(false)
        const newDate = addMinutes(begin, order.formation.session_duration);
        if(new Date(newDate).getTime() < new Date().getTime()){
            setlogErr(true)
            return
        }
        setLoading(true)
		try {
            const seances = await fetch(`${API_URL}/api/formations/seances`, GETRequest).then(r => r.json())
            if(seances.length > 0){
                //create range with starting & ending time of existing slot & compare if our time is not include
                var tutor_seances = seances.filter(s => s.tutor_id === order.tutor_id).map(uu => ({start:new Date(uu.beginning_date).getTime(), end:new Date(uu.end_date).getTime()}))
                for(let disp of tutor_seances){
                    if( 
                        //new start hour include between old start & end hours
                        new Date(begin).getTime() >= disp.start
                        && new Date(begin).getTime() < disp.end
                        ||
                        //new end hour include between old start & end hours
                        new Date(newDate).getTime() <= disp.end
                        && new Date(newDate).getTime() > disp.start
                    ) {setlogErr(true);setLoading(false);return}
                }
            }
            // console.log(new Date(begin).getTime(), new Date(newDate).getTime());
            
            const token_request = await fetch(`${API_URL}/api/auth/google/access_token`, GETRequest)
            const token = await token_request.json()

            if(token?.access_token !== null && token?.access_token !== undefined && token?.access_token){
                // const tutor_email = await fetch(`${API_URL}/api/tutors/${order?.tutor_id}`, GETRequest).then(r => r.json())
                const event = {
                    summary: `[SCRIPTOR] - Séance`,
                    description: `Séance pour la formation ${order?.formation?.title}`,
                    start: {
                        dateTime: new Date(`${dateToHyphenDate(begin)}T${hourToHyphenHour(begin)}`).toISOString(),
                        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
                    },
                    end: {
                        dateTime: new Date(`${dateToHyphenDate(newDate)}T${hourToHyphenHour(newDate)}`).toISOString(),
                        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
                    },
                    conferenceData:{
                        createRequest: {
                            requestId:uuidv4(),
                            conferenceSolutionKey: {
                                type:'hangoutsMeet'
                            }
                        },
                    },
                    // attendees:[
                    //     { email:tutor_email?.email },
                    //     { email: order?.client?.email }
                    // ],
                }
                const event_request = await fetch(`https://www.googleapis.com/calendar/v3/calendars/primary/events?conferenceDataVersion=1&sendNotifications=true`, {
                    method: "POST",  
                    headers: {
                        'Authorization': `Bearer ${token?.access_token}`,
                    },
                    body:JSON.stringify(event)  
                })
                const new_event = await event_request.json()
                const response = await fetch(`${API_URL}/api/formations/${order.formation_id}/seances`, POSTRequest({
                        tutor_id: order.tutor_id,
                        client_id: order.client_id,
                        beginning_date:`${dateToHyphenDate(begin)}T${hourToHyphenHour(begin)}`,
                        end_date:`${dateToHyphenDate(newDate)}T${hourToHyphenHour(newDate)}`,
                        google_meet_link: new_event.hangoutLink,
                        google_event_id: new_event.id
                }))
                const seance = await response.json()
                
                const add_seance = await fetch(`${API_URL}/api/orders/${order.id}/seances/${seance.id}`, POSTRequest())
                if(add_seance.status && response.status === 200){
                    setAddTime(false); unlock(); setLoading(false);
                    location.reload();
                    return
                }
            }
            setLoading(false)
            setlogErr(true)
		} catch (err) {
			console.error('Request failed:' + err)
            setLoading(false)
            setlogErr(true)
		}
	}

    return(
        <div className="w-[100vw] h-[100vh] bg-black/60 items-center justify-center overflow-hidden z-50 absolute top-0 left-0"
             style={addTime ? {display:"flex", top:`${position}px`} : {display:"none"}}>
            <div className="flex flex-col bg-white w-[400px] pt-2 pb-10 px-7 relative sm:w-[90%]">
                <Image src={Close} alt="Close pictogram" 
                       onClick={() => {setlogErr(false); setAddTime(false); unlock()}} 
                       className='self-end -mr-5 h-7 w-auto cursor-pointer' />
                <>
                    <h1 className="text-xl font-bold text-center py-5 pb-10">Ajouter une séance</h1>
                    {logErr ? <div className="text-sm text-[#d32f2f] text-center mb-10 -mt-5">{`Une erreur est survenue (créneau déjà réservé, date incohérente...)`}</div> : ''}
                    {loading
                    ? <Loading />
                    :
                    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-5 relative justify-center">
                        <ThemeProvider theme={colorTheme}>
                            <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={fr}>
                                <DateTimePicker disablePast label="Date de la séance" defaultValue='' value={begin} onChange={(newValue) => setBegin(newValue)} slotProps={{ textField: { required: true } }} minutesStep={30} />
                            </LocalizationProvider>
                            <Button type="submit" variant="contained" className="bg-[#3D9EC2] py-2.5 rounded-md text-md">VALIDER</Button>
                        </ThemeProvider>
                    </form>
                }
                </>
            </div>
        </div>
    )
}