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 { dateToHyphenDate, hourToHyphenHour } from "@/utils/timeToHours";
import fr from 'date-fns/locale/fr';
import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';

const API_URL = process.env.NEXT_PUBLIC_API_URL

    export function AddTime ({addTime, setAddTime, setDisponibilities, disponibilities, day, tutor}) {
        const {handleSubmit} = useForm ()
        const [logErr, setlogErr] = useState(false)
        const [logRequestErr, setlogRequestErr] = useState(false)
        const [logRequest2Err, setlogRequest2Err] = useState(false)
        const [logGlobalErr, setlogGlobalErr] = useState(false)
        const [loading, setLoading] = useState(false)
        const [begin, setBegin] = useState(parseISO(0));
        const [end, setEnd] = useState(parseISO(0));

        async function onSubmit() {
            setlogErr(false)
            setlogRequestErr(false)
            setlogRequest2Err(false)
            setlogGlobalErr(false)
            if(disponibilities.length > 0){
                //time selected in minutes can't be include in slot already created
                //create range with starting & ending time of existing slot & compare if our time is not include
                for(let disp of disponibilities){
                    if( 
                        //new start hour include between old start & end hours
                        begin.getHours()*60+begin.getMinutes() >= disp.start.slice(0,2)*60+Number(disp.start.slice(5,3))
                        && begin.getHours()*60+begin.getMinutes() < disp.end.slice(0,2)*60+Number(disp.end.slice(5,3))
                        ||
                        //new end hour include between old start & end hours
                        end.getHours()*60+end.getMinutes() <= disp.end.slice(0,2)*60+Number(disp.end.slice(5,3))
                        && end.getHours()*60+end.getMinutes() > disp.start.slice(0,2)*60+Number(disp.start.slice(5,3))
                    ) return setlogErr(true)
                }
            }
            // if( begin.getHours() > end.getHours() || begin.getHours() === end.getHours() && begin.getMinutes() === end.getMinutes()) return setlogErr(true)
            setLoading(true)
            try {
                const response = await fetch(`${API_URL}/api/tutors/${tutor}/disponibilities`, POSTRequest({
                    begin_at: `${dateToHyphenDate(day)}T${hourToHyphenHour(begin)}`,
                    end_at: `${dateToHyphenDate(day)}T${hourToHyphenHour(end)}`
                }))
                if(response.status !== 200) {
                    setLoading(false)
                    setlogRequestErr(true)
                    return
                }
                const reload_result = await fetch(`${API_URL}/api/tutors/${tutor}/disponibilities`, GETRequest)
                const reload = await reload_result.json()
                if(reload_result.status === 200){
                    setDisponibilities(reload)
                    setAddTime(false); unlock(); setLoading(false)
                    return
                }
                setLoading(false)
                setlogRequest2Err(true)
            } catch (err) {
                console.error('Request failed:' + err)
                setLoading(false)
                setlogGlobalErr(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"} : {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 text-black font-bold text-center py-5 pb-10">Ajouter une disponibilité</h1>
                    {logErr ? <div className="text-sm text-[#d32f2f] text-center mb-10 -mt-5">{`Erreur (incohérence, créneau déjà intégré, etc.), n'hésitez pas à vérifier ou actualiser la page.`}</div> : ''}
                    {logRequestErr ? <div className="text-sm text-[#d32f2f] text-center mb-10 -mt-5">{`Une erreur est survenue, réessayez plus tard.`}</div> : ''}
                    {logRequest2Err ? <div className="text-sm text-[#d32f2f] text-center mb-10 -mt-5">{`Une erreur d'actualisation est survenue, réessayez plus tard.`}</div> : ''}
                    {logGlobalErr ? <div className="text-sm text-[#d32f2f] text-center mb-10 -mt-5">{`Request error, réessayez plus tard.`}</div> : ''}
                    {loading
                    ? <Loading />
                    :
                    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-5 relative justify-center">
                        <ThemeProvider theme={colorTheme}>
                            <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={fr}>
                                <MobileTimePicker label="Heure du début" ampm={false} defaultValue='' value={begin} onChange={(newValue) => setBegin(newValue)}
                                slotProps={{ textField: { required: true } }} minutesStep={30}/>
                                <MobileTimePicker label="Heure de fin" ampm={false} value={end} onChange={(newValue) => setEnd(newValue)}
                                slotProps={{ textField: { required: true } }} minutesStep={30}/>
                            </LocalizationProvider>
                            <p className="text-typo text-sm text-center py-2">{`Attention : heure de fin maximum 23h30 et doit être supérieure à l'heure de début`}</p>
                            <Button type="submit" variant="contained" className="bg-[#3D9EC2] py-2.5 rounded-md text-md">VALIDER</Button>
                        </ThemeProvider>
                    </form>
                }
                </>
            </div>
        </div>
    )
}