My-Weekly-ToDo-List/src/components/WeeklyCalendarView.tsx

'use client';

import React, { useState, useEffect } from 'react';
import TaskList from './TaskList';

interface Task {
  id: string;
  title: string;
  description?: string;
  completed: boolean;
  startTime?: string;
  endTime?: string;
  dayOfWeek?: number; // 0 = Sunday, 1 = Monday, etc.
  createdAt: Date;
  updatedAt: Date;
}

interface WeeklyCalendarViewProps {
  tasks: Task[];
  onTaskDrop?: (taskId: string, newDayOfWeek: number) => void;
}

const WeeklyCalendarView: React.FC<WeeklyCalendarViewProps> = ({ tasks, onTaskDrop }) => {
  const [currentWeekStart, setCurrentWeekStart] = useState<Date>(new Date());
  
  // Days of the week
  const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  
  // Function to get tasks for a specific day
const getTasksForDay = (dayIndex: number): Task[] => {
  // The tasks passed in don't have dayOfWeek - they're already filtered by day
  return tasks.filter(task => true); // dummy filter since actual filtering is handled differently
};
  
  // Function to handle drag start
  const handleDragStart = (e: React.DragEvent, taskId: string) => {
    e.dataTransfer.setData('taskId', taskId);
  };
  
  // Function to handle drag over
  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
  };
  
  // Function to handle drop
  const handleDrop = (e: React.DragEvent, dayIndex: number) => {
    e.preventDefault();
    const taskId = e.dataTransfer.getData('taskId');
    if (onTaskDrop) {
      onTaskDrop(taskId, dayIndex);
    }
  };
  
  // Function to goToPreviousWeek
  const goToPreviousWeek = () => {
    const newDate = new Date(currentWeekStart);
    newDate.setDate(newDate.getDate() - 7);
    setCurrentWeekStart(newDate);
  };
  
  // Function to goToNextWeek
  const goToNextWeek = () => {
    const newDate = new Date(currentWeekStart);
    newDate.setDate(newDate.getDate() + 7);
    setCurrentWeekStart(newDate);
  };
  
  // Get current week range
  const getWeekRange = (): { start: string; end: string } => {
    const start = new Date(currentWeekStart);
    const end = new Date(start);
    end.setDate(end.getDate() + 6);
    
    return {
      start: start.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
      end: end.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
    };
  };
  
  // Keyboard navigation
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'ArrowLeft') {
        goToPreviousWeek();
      } else if (e.key === 'ArrowRight') {
        goToNextWeek();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [currentWeekStart]);
  
  const weekRange = getWeekRange();
  
  return (
    <div className="weekly-calendar-view">
      <div className="calendar-header">
        <div className="week-navigation">
          <button 
            onClick={goToPreviousWeek} 
            className="nav-button"
            aria-label="Previous week"
          >
            &larr; Previous Week
          </button>
          <span className="week-range">{weekRange.start} - {weekRange.end}</span>
          <button 
            onClick={goToNextWeek} 
            className="nav-button"
            aria-label="Next week"
          >
            Next Week &rarr;
          </button>
        </div>
      </div>
      
      <div className="calendar-grid">
        {daysOfWeek.map((day, index) => (
          <div 
            key={day} 
            className="day-column"
            onDragOver={handleDragOver}
            onDrop={(e) => handleDrop(e, index)}
          >
            <div className="day-header">
              <h3>{day}</h3>
            </div>
            <div className="day-content">
              <TaskList tasks={getTasksForDay(index)} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default WeeklyCalendarView;