import React from 'react';
import { useDrop } from 'react-dnd';
import PropTypes from 'prop-types';

// Définition du composant DropTargetCell
const DropTargetCell = ({ day, hour, courses, onDrop, onClick }) => {
  const [{ isOver, canDrop }, drop] = useDrop(
    () => ({
      accept: 'SPECIALITY',
      drop: (item) => onDrop(item, hour, day),
      collect: (monitor) => ({
        isOver: monitor.isOver(),
        canDrop: monitor.canDrop(),
      }),
    }),
    [hour, day]
  );

  const isColorDark = (color) => {
    if (!color) return false;
    const r = parseInt(color.slice(1, 3), 16);
    const g = parseInt(color.slice(3, 5), 16);
    const b = parseInt(color.slice(5, 7), 16);
    return r * 0.299 + g * 0.587 + b * 0.114 < 150;
  };

  const isToday = (someDate) => {
    const today = new Date();
    return (
      someDate.getDate() === today.getDate() &&
      someDate.getMonth() === today.getMonth() &&
      someDate.getFullYear() === today.getFullYear()
    );
  };

  // Vérifie si c'est une heure pleine
  const isFullHour = parseInt(hour.split(':')[1], 10) === 0;
  return (
    <div
      ref={drop}
      onClick={() => onClick(hour, day)}
      className={`relative cursor-pointer 
                  ${isToday(new Date(day)) ? 'bg-emerald-100/50 border-x border-emerald-600' : ''} 
                  hover:bg-emerald-100 h-10 border-b
                  ${isFullHour ? 'border-emerald-200' : 'border-gray-300'} 
                  ${isOver && canDrop ? 'bg-emerald-200' : ''}`} // Ajouté pour indiquer le drop
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column',
        width: '100%',
      }}
    >
      {courses.map((course) => (
        <div
          key={course.matiere}
          className="flex flex-row items-center justify-center gap-2"
          style={{
            backgroundColor: course.color,
            color: isColorDark(course.color) ? '#E5E5E5' : '#333333',
            width: '100%',
            height: '100%',
          }}
        >
          <div style={{ textAlign: 'center', fontWeight: 'bold' }}>
            {course.matiere}
          </div>
          <div style={{ fontStyle: 'italic', textAlign: 'center' }}>
            {course.teachers.join(', ')}
          </div>
        </div>
      ))}
    </div>
  );
};

DropTargetCell.propTypes = {
  day: PropTypes.string.isRequired,
  hour: PropTypes.string.isRequired,
  courses: PropTypes.array.isRequired,
  onDrop: PropTypes.func.isRequired,
  onClick: PropTypes.func.isRequired,
  formData: PropTypes.object.isRequired,
};

export default DropTargetCell;
