"use client";
import React, { useEffect, useState, useContext } from "react";
import { UserContext } from './UsernameProvider';
const myUserId = 1
export default function TimeslotComponent({id,title, usersId}){
const [show, setShow] = useState(false);
const [nameState, setNameState] = useState(usersId);
const userContext = useContext(UserContext)
const [usernames, setUsernames] = useState()
useEffect(() => {
userContext.then(result => setUsernames(result))
}, [userContext])
useEffect(() => {
console.log(nameState)
}, [nameState])
return (
<div className="relative z-1 h-full">
<div className="absolute right-0 left-0 top-0 p-0.5 bg-zinc-50 m-0.5">
<div className=" pt-0 p-1 lg:text-sm text-xs font-mono rounded-lg rounded-bl-none rounded-tr-none rounded-tl-none min-h-full w-full bg-[#7c4145]" onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)} >
<div className="lg:flex justify-between">
<div className="font-white font-semibold capitalize lg:underline underline-offset-4 decoration-pink-500 decoration-2 lg:mt-1">{title}</div>
{
(!!nameState.includes(myUserId)) ? <IsFreeButton id={id} setName={setNameState}/> : <IsBusyButton id={id} setName={setNameState}/>
}
</div>
{show && <div className=" capitalize">{nameState.map(userId => <div >{usernames[userId]}</div>)}</div>}
</div>
</div>
<div className="bg-[#3F565F] w-1 ml-0.5 h-full z-0">
</div>
</div>
)
}
function IsFreeButton({id, setName}){
return <button className="bg-green-500 border-transparent text-white font-semibold px-1 lg:mt-1 border rounded hover:border-green-500 hover:bg-transparent hover:text-green-700" onClick={() => {removeMeToTimeslot(id); setName(prevNames => removeName(prevNames))}}>Free</button>
}
function IsBusyButton({id, setName}){
return <button className="bg-red-500 border-transparent text-white font-semibold px-1 lg:mt-1 border rounded hover:border-red-500 hover:bg-transparent hover:text-red-700" onClick={() => {addMeToTimeslot(id); setName(prevNames => addName(prevNames))}}>Busy</button>
}
function addName(names){
return [].concat(names, myUserId);
}
function removeName(names){
return names.filter(name => name != myUserId);
}
async function addMeToTimeslot(id){
await fetch(`/api/timeslot/user/add?userId=1&groupId=1×lotId=${id}`, {method: "PUT",})
}
async function removeMeToTimeslot(id){
await fetch(`/api/timeslot/user/del?userId=1&groupId=1×lotId=${id}`, {method: "DELETE",})
}