frontend/src/components/Scheduler.tsx

import React, { useEffect, MouseEvent, useRef, useCallback, useLayoutEffect } from 'react';
import { useState } from 'react';
import { SchedulerEvents } from './SchedulerEvents';
import { days, hours } from '../constants/index';
import styled from 'styled-components/macro';

const SchedulerWrapper = styled.div`
  border-collapse: collapse;
  flex: 1;
  background-color: white;
  padding: 5px 15px 5px 5px;
  border-radius: 5px;
  margin-right: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 3px 3px 3px -2px rgba(0, 0, 0, 0.59);
`;

const TableBody = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
`;

const TableRow = styled.div`
  display: flex;
`;

const TableHead = styled.div`
  display: flex;
  width: 100%;
`;

interface TableCellProps {
  height: number;
  isHourColumn?: boolean;
}

const TableCell = styled.div<TableCellProps>`
  height: ${({ height }) => height}px;
  border-width: ${({ isHourColumn }) => !isHourColumn && '2px'};
  border-style: ${({ isHourColumn }) => !isHourColumn && 'none solid dotted none'};
  border-color: rgb(242, 243, 245);  
  margin-top: ${({ isHourColumn, height }) => isHourColumn ? -(height / 2) : 0}px;
  display: flex;
  align-items: center;
  justify-content: ${({ isHourColumn }) => isHourColumn ? 'flex-end' : 'center'};
  flex: ${({ isHourColumn }) => isHourColumn ? '1' : '5'};
  margin-right: ${({ isHourColumn }) => isHourColumn ? '10px' : '0px'};
  font-size:  0.75vw;
  user-select: none;
  border-collapse:collapse;
  :nth-child(2) {
    border-left: 2px solid rgb(242, 243, 245);
  }
  font-weight: bold;
  `;


export const Scheduler = () => {
  const cellRef = useRef<HTMLDivElement>(null);
  const [cellWidth, setCellWidth] = useState(0);
  const [cellTop, setCellTop] = useState(0);

  const wrapperRef = useRef<HTMLDivElement>(null);
  const [wrapperHeight, setWrapperHeight] = useState(0);
  const [, updateState] = useState<any>();
  const forceUpdate = useCallback(() => updateState({}), []);


  useEffect(() => {
    const handleResize = () => {
      if (cellRef.current) {
        setCellWidth(cellRef.current.getBoundingClientRect().width);
        setCellTop(cellRef.current.getBoundingClientRect().top);
        cellRef.current.style.backgroundColor = "blue";
        console.log("XDDD")
      }

    };
    handleResize();
  }, []);

  useEffect(() => {
    const handleWrapperResize = () => {
      if (wrapperRef.current) {
        setWrapperHeight(wrapperRef.current.getBoundingClientRect().height);
      }
    }
    window.addEventListener('resize', handleWrapperResize);
    return () => window.removeEventListener('resize', handleWrapperResize);

  }, [])


  return (
    <>
      <SchedulerWrapper ref={wrapperRef}>
        <TableHead>
          {days.map((day, indexCell) =>
            indexCell === 0 ? (
              <TableCell height={wrapperHeight / 26} isHourColumn={true} key={indexCell} >
                {day}
              </TableCell>
            ) : (
                <TableCell height={wrapperHeight / 26} style={{ borderStyle: 'none none solid none' }} key={indexCell}>
                  {day}
                </TableCell>
              ),
          )}
        </TableHead>
        <TableBody>
          {hours.map((hour, indexRow) => (
            <TableRow key={indexRow}>
              {[hour, '', '', '', '', ''].map((value, indexCell) =>
                indexCell === 0 ? (
                  <TableCell height={wrapperHeight / 26} isHourColumn={true} key={`${indexRow}${indexCell}`}>
                    {value}
                  </TableCell>)
                  : (indexRow === 0 && indexCell === 1) ? (<TableCell height={wrapperHeight / 26} ref={cellRef} key={`${indexRow}${indexCell}`}>
                    {value}
                  </TableCell>
                  ) : indexRow === 23 ? (
                    <TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
                      {value}
                    </TableCell>
                  ) : indexCell === 5 ? (
                    <TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}>
                      {value}
                    </TableCell>
                  ) : indexRow % 2 !== 0 ? (
                    <TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
                      {value}
                    </TableCell>
                  ) : <TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}>
                            {value}
                          </TableCell>
              )}
            </TableRow>
          ))}
        </TableBody>
        <SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 26} />
      </SchedulerWrapper>
    </>
  );
};