import React, { useEffect, useRef } from "react";
import { Draggable } from "@fullcalendar/interaction";

const ExternalDraggable = ({category}) => {
  const eventContainerRef = useRef(null);

  const events = [
    {id: '1111', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2025-01-18')},
    {id: '2222', title: 'Meeting In Office', color: 'fc-event-warning', start: new Date('2025-01-19')},
    {id: '3333', title: 'Client Call', color: 'fc-event-danger', start: new Date('2025-01-22')},
    {id: '4444', title: 'Interview', color: 'fc-event-success', start: new Date('2025-01-1')}
]

  useEffect(() => {
    // Make the external events draggable
    const draggable = new Draggable(eventContainerRef.current, {
      itemSelector: ".fc-event",
      eventData: (eventEl) => ({
        title: eventEl.innerText.trim(),
      }),
    });

    // Cleanup the Draggable instance on unmount
    return () => {
      draggable.destroy();
    };
  }, []);

  return (
    <div ref={eventContainerRef} className="external-events">
      {category && category.map((item, index) => {
        let color = index % 4 === 0 ? 'fc-event-success' : index % 3 === 0 ? 'fc-event-danger' : index % 2 === 0 ? 'fc-event-warning' : 'fc-event-primary'
        return (
            <div key={item?.cid || index} className={`fc-event ${color}`} data-color={`${color}`} >
                {item.description}
            </div>
        )
      } 
      )}
    </div>
  );
};

export default ExternalDraggable;