import { unlock } from "@/utils/lockScreen";
import { GETRequest } from "@/utils/requestHeader";
import { CircularLoading } from "./loader";
import { useState } from "react";

const API_URL = process.env.NEXT_PUBLIC_API_URL

export function DeleteCardSeance ({deleteCard, setDeleteCard, meet, id, setError}) {
    const [loading, setLoading] = useState(false)
    async function deleteSeance (id_seance, id_event) {
        setError(false);setLoading(true);
        try {
          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){
            await fetch(`https://www.googleapis.com/calendar/v3/calendars/primary/events/${id_event}?sendUpdates=all`, {
                method: "DELETE",  
                headers: {
                    'Authorization': `Bearer ${token?.access_token}`,
                }
            })
            const response = await fetch(`${API_URL}/api/formations/seances/${id_seance}`, {
                method: "DELETE",
                mode: "cors",
                headers: {
                    "Accept": "application/json",
                    'Content-Type': 'application/json',
                },
            })
              if(response.status === 200) {
                  location.reload();
                  setLoading(false)
                return
            }
          }
          setError(true);setLoading(false)
        } catch (err) {
          setLoading(false);setError(true);
          console.error('Request failed:' + err)
        }
    } 
 
    return(
        <div className="w-[100vw] h-[100vh] bg-black/50 items-center justify-center overflow-hidden z-50 absolute top-0 left-0"
             style={deleteCard ? {display:"flex"} : {display:"none"}}>
            <div className="flex flex-col rounded-lg bg-white pt-2 pb-5 px-7 relative sm:w-[90%]">
                <div className="flex gap-10 mt-5">
                { loading 
                ? <CircularLoading />
                :<>
                    <button className='w-[130px] rounded text-center z-10 text-white py-3 text-lg bg-[#3D9EC2]/70 hover:bg-[#3D9EC2] transition-all duration-300' onClick={() => {deleteSeance(id, meet)}}>Supprimer</button>
                    <button className='w-[130px] rounded text-center z-10 text-white py-3 text-lg bg-red-500 hover:bg-red-700 transition-all duration-300' onClick={() => {setDeleteCard(false); unlock();window?.scrollTo({bottom:0})}}>Annuler</button>
                </>
                }
                </div>
            </div>
        </div>
    )
}