"use client"
import { useState, useEffect } from "react";
import TimeslotComponent from "./Timeslot";
import { format } from 'date-fns';
export default function RosterComponent({rooster}){
const [isLoading, setLoading] = useState(true)
const [timeslots, setTimeslots] = useState()
useEffect(() => {
fetch(`/api/rooster/timeslots?userId=1&groupId=1&roosterId=${rooster.id}`, { cache: 'no-store' })
.then((res) => res.json())
.then((data) => {
data.forEach(timeslot => {timeslot.startDateTime = new Date(timeslot.startDateTime); timeslot.endDateTime = new Date(timeslot.endDateTime)})
setTimeslots(data)
setLoading(false)
})
}, [])
const dateRange = dateRangeLoop(rooster.startDate,rooster.endDate);
const earlyTime = 8
const lateTime = 22
if (isLoading) return <Loading/>
return (
<div className="bg-[#2e3f45] text-white w-full p-5 pb-3">
<div className="flex flex-col">
<div className="flex flex-row ">
<div className="w-10 flex-none"></div>
<div className="flex flex-row w-full">
{
dateRange.map(date =>
<div key={date} className="flex-1 text-center font-bold">
<div >{format(date, 'EEE')}</div>
<div className="mx-5 rounded-full border-2">{date.getDate()}</div>
<div className="h-3 border-l-0.1 border-gray-400"></div>
</div>
)
}
</div>
</div>
<div className="flex flex-row">
<div className="flex flex-col">
{Array.from({ length: lateTime - earlyTime + 1 }, (_, i) => i + earlyTime).map(hour =>
<div key={hour} className="flex flex-row h-12">
<div className="w-8 text-right pr-1 relative bottom-3 text-sm">{hour}u</div>
<div className="w-2 border-t-0.1 border-gray-400"></div>
</div>
)}
</div>
<div className="flex flex-row w-full">
{
dateRange.map(date =>
<div key={date} className="flex-1 grid grid-cols-1">
{timeRangeLoop(date, earlyTime, lateTime)
.filter(time => !timeslots.some(timeslot => timeslot.startDateTime < time && time < timeslot.endDateTime ))
.map((time, i, arr) =>
<div key={time} className={`border-t-0.1 border-l-0.1 h-full border-gray-400 ${rowspan(arr[i+1]?.getHours() - time.getHours())} `}>
{
timeslots
.filter(timeslot => (timeslot.startDateTime.getTime() == time.getTime()))
.map(timeslot => <TimeslotComponent key={timeslot.id} id={timeslot.id} title={timeslot.description} usersId={timeslot.usersId} />)
}
</div>)
}
</div>
)
}
</div>
</div>
</div>
</div>
)
}
function dateRangeLoop(startDate, endDate) {
const dateArray = []
const currentDate = new Date(startDate)
while (currentDate <= endDate) {
dateArray.push(new Date(currentDate))
currentDate.setDate(currentDate.getDate() + 1)
}
return dateArray
}
function timeRangeLoop(date, earlyTime, lateTime) {
const timeArray = []
const currentDateTime = new Date(date)
const endDateTime = new Date(date)
currentDateTime.setHours(earlyTime)
endDateTime.setHours(lateTime)
while (currentDateTime <= endDateTime) {
timeArray.push(new Date(currentDateTime));
currentDateTime.setHours(currentDateTime.getHours() + 1)
}
return timeArray
}
function rowspan(i){
const rowspans = [
'row-span-1',
'row-span-2',
'row-span-3',
'row-span-4',
'row-span-5',
'row-span-6',
'row-span-7',
'row-span-8',
'row-span-9',
'row-span-10',
'row-span-11',
'row-span-12',
'row-span-13',
'row-span-14',
'row-span-15',
'row-span-16',
'row-span-17',
'row-span-18',
'row-span-19',
'row-span-20',
'row-span-21',
'row-span-22',
'row-span-23',
'row-span-24'
];
return rowspans[i-1] || rowspans[0];
}
function Loading(){
return (
<div className="w-full h-full flex items-center justify-center relative">
<div className=" z-50 absolute m-auto w-48 h-48 border-t-2 rounded-full animate-spin" />
<div className=" z-50 absolute m-auto w-60 h-60 border-b-2 rounded-full animate-spin" />
<div className=" z-50 absolute m-auto w-72 h-72 border-l-2 rounded-full animate-spin" />
<div className=" z-50 absolute m-auto w-80 h-80 border-r-2 rounded-full animate-spin" />
</div>
)
}