MermsPanelReactJS/src/component/calendar/Calendar.jsx

import React, { useCallback, useState } from "react";
import { useQuery } from '@tanstack/react-query'

import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import EventCalendar from "./EventCalendar";
import ExternalDraggable from "./ExternalDraggable";

import { getCalendarEvents } from '../../services/services'
import queryKeys from '../../services/queryKeys'


export default function Calendar(){

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

    const {data, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.calendar_events,
        queryFn: () => getCalendarEvents()
    })

    const receievedEvents = data?.data?.bar_data
    const category = receievedEvents?.category  //EVENT CATEGORIES FROM API
    const eventList = receievedEvents?.list //EVENT LIST FROM API

    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')}
    ]

    const [dummyEvents, setDummyEvents] = useState(events)

    const [removeAfterDrop, setRemoveAfterDrop] = useState(false)

    const [newEvent, setNewEvent] = useState({
        title: '', color: ''
    })

    const handleEditEvent = ({target:{name,value}}) => {
        setNewEvent(prev => ({...prev, [name]:value}))
    }

    const handleAddNewEvent = () => {
        if(newEvent.title && newEvent.color){
            const eventToAdd = {...newEvent}
            setDummyEvents(prev => ([...prev, eventToAdd]))
            setNewEvent({title: '', color: ''})
        }
    }


    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">
                            {isFetching ? 
                                <>
                                    <div className="col-12">
                                        <p className='text-mute'>Loading...</p>
                                    </div>
                                </>
                                : isError ?
                                <div className="col-12">
                                    <p className='text-danger'>{error.message}</p>
                                </div>
                                :
                                <>
                                    <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 category={category} />
                                            {/* <div className="form-check">
                                                <input className="form-check-input" type="checkbox" value={removeAfterDrop}
                                                    id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} />
                                                    <label className="form-check-label" htmlFor="defaultCheck1">
                                                        Remove After Drop
                                                    </label>
                                            </div> */}
                                        </div>
                                    </div>
                                    <div className="col-xl-9">
                                        <div className="event-calendar">
                                            <EventCalendar 
                                                removeAfterDrop={removeAfterDrop} 
                                                eventList={eventList}
                                            />
                                        </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" name='title' value={newEvent.title} onChange={handleEditEvent} />
                                </div>
                                <div className="form-group">
                                    <label>Choose Event Color</label>
                                    <select className="form-control" name='color' value={newEvent.color} onChange={handleEditEvent}>
                                        <option value={''}>Select</option>
                                        <option value={'fc-event-primary'}>Primary</option>
                                        <option value={'fc-event-warning'}>Warning</option>
                                        <option value={'fc-event-success'}>Success</option>
                                        <option value={'fc-event-danger'}>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" onClick={handleAddNewEvent}>Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}