import React, { useCallback, useState } from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import EventCalendar from "./EventCalendar";
import ExternalDraggable from "./ExternalDraggable";


export default function Calendar(){

    // const [draggedEvent, setDraggedEvent] = useState('undroppable')
    // const handleDragStart = (event) => {
    //     setDraggedEvent(event)
    // }

    const dummyEvents = [
        {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')}
    ]

    return(
        <>
            <BreadcrumbComBS title='Calendar' paths={['Dashboard', 'Calendar']} />
            <div className="row">
                <div className="col-lg-12">
                    <div className="card card-statistics">
                        <div className="card-header">
                            <div className="card-heading">
                                <h4 className="card-title">Event Calendar</h4>
                            </div>
                        </div>
                        <div className="card-body">
                            <div className="row">
                                <div className="col-xl-3">
                                    <div id="external-events">
                                        <button className="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#eventModal">
                                            Add New Event
                                        </button>
                                        <p className="mt-3">
                                            Drag and drop your event or click in the calendar.
                                        </p>
                                        {/* {dummyEvents.map((item, index) => (
                                            <div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`} 
                                                draggable="true"
                                                onDragStart={() =>
                                                handleDragStart({...item})
                                                }
                                            >
                                                <span></span> {item.title}
                                            </div>
                                        ))} */}
                                        <ExternalDraggable dummyEvents={dummyEvents} />
                                        <div className="form-check">
                                            <input className="form-check-input" type="checkbox" value=""
                                                   id="defaultCheck1" />
                                                <label className="form-check-label" htmlFor="defaultCheck1">
                                                    Remove After Drop
                                                </label>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-xl-9">
                                    <div className="event-calendar">
                                        {/* <EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} /> */}
                                        <EventCalendar />
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            {/* Event Modal */}
            <div className="modal fade" id="eventModal" tabIndex="-1" role="dialog">
                <div className="modal-dialog modal-dialog-centered" role="document">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h5 className="modal-title" id="verticalCenterTitle">Add New Event</h5>
                            <button type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div className="modal-body">
                            <form>
                                <div className="form-group">
                                    <label>Event Name</label>
                                    <input type="email" className="form-control" id="eventname" />
                                </div>
                                <div className="form-group">
                                    <label>Choose Event Color</label>
                                    <select className="form-control">
                                        <option>Primary</option>
                                        <option>Warning</option>
                                        <option>Success</option>
                                        <option>Danger</option>
                                    </select>
                                </div>

                            </form>
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
                            <button type="button" className="btn btn-success">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}