Untitled

"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>
  )
}