Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
55 kB
4
Indexable
import React, { useEffect, useRef, useState } from 'react';

// styles
import { makeStyles } from '@material-ui/core/styles';
import { Card, Typography, Box, Chip, TextareaAutosize, FormControlLabel, Checkbox } from '@mui/material';

import { Button, Dropdown, DropdownMenu, DropdownItem, DropdownToggle, Col, Form, Input, Label, Modal, ModalBody, ModalHeader, Row } from "reactstrap";

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import FullCalendar from '@fullcalendar/react';
import timeGridPlugin from '@fullcalendar/timegrid'
import dayGridPlugin from '@fullcalendar/daygrid';
import BootstrapTheme from "@fullcalendar/bootstrap";

import EngineeringIcon from '@mui/icons-material/Engineering';
import UpgradeIcon from '@mui/icons-material/Upgrade';
import KeyboardReturnIcon from '@mui/icons-material/KeyboardReturn';
import LocalShippingIcon from '@mui/icons-material/LocalShipping';
import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
import GppGoodIcon from '@mui/icons-material/GppGood';
import ReportProblemIcon from '@mui/icons-material/ReportProblem';
import BugReportIcon from '@mui/icons-material/BugReport';
import CloseIcon from '@mui/icons-material/Close';
import MiscellaneousServicesIcon from '@mui/icons-material/MiscellaneousServices';
import GroupsIcon from '@mui/icons-material/Groups';

import "react-datepicker/dist/react-datepicker.css"; // Стилове на DatePicker компонента

// services
import { getAllEvents, getAllNomenclatures, getNomenclatureTypes, getEventById } from '../../services/EventService';

// helpers
import * as helpers from '../../helpers/Helper';
import { getNomenclatureNameForApi, getNomenclatureIdForApi, getNomenclatureNameByType } from './eventHelper';

//css
// import "@fullcalendar/bootstrap/main.css";

const useStyles = makeStyles((theme) => ({
    root: {},
    titleText: {
        color: '#4B4B4B',
        fontWeight: 'bold',
        marginBottom: '1em',
        padding: '1em',
        fontSize: '1rem'
    },
    itemTitle: {
        color: '#4B4B4B',
        fontWeight: 'bold',
        padding: '1em',
        fontSize: '1rem'
    },
    title: {
        marginLeft: '10px'
    },
    filterHeader: {
        marginTop: '20px',
        marginLeft: '10px',
    },
    '.MuiPickersDay-root.Mui-selected': {
        width: '24px',
        height: '24px',
        borderRadius: '50%',
        backgroundColor: '#209214!important',
    },
    menuList: {
        '.MuiMenu-list': {
            display: 'flex !important',
            flexDirection: 'column !important'
        }
    },
    select: {
        minWidth: '200px'
    },
    menuItemColumn: {
        display: 'block',
        padding: '10px'
    },
    filterColumn: {
        minWidth: 'fit-content'
    },
    datePickerFromDate: {
        marginLeft: '30px',
        flex: '0 0 1em'
    },
    datePickerInput: {
        '& div': {
            padding: '5px'
        }
    },
    filtersRow: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
    },
    addBtn: {
        alignSelf: 'end',
        minWidth: 'fit-content'
    },
    applyBtn: {
        margin: '10px',
        textAlign: 'center'
    },
    selectedItemsContainer: {
        display: 'flex',
        alignItems: 'center',
        gap: theme.spacing(1),
        flexWrap: 'wrap',
        margin: '20px 10rem 0px 1rem',
    },
    selectedChip: {
        backgroundColor: '#556ee6',
        color: 'white',
        borderRadius: '10px',
    },
    fullCalendar: {
        zIndex: 1,
        '& .fc-toolbar.fc-header-toolbar': {
            margin: '20px',
        },
        '& .fc-toolbar-title': {
            color: '#495057'
        },
        '& .table-bordered th, .table-bordered td, .table-bordered': {
            border: '1px solid #eff2f7'
        },
        '& .fc-daygrid-day-top': {
            position: 'absolute'
        },
        '& .fc-daygrid-event-harness': {
            margin: '0 20px',
            borderRadius: '10px',
            '& .fc-h-event': {
                borderRadius: '10px'
            },
        },
        '& .fc-event-main': {
            overflow: 'hidden'
        },
        '& .fc-toolbar-chunk': {
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
        }
    },
    customEvent: {
        color: 'black',
        overflow: 'hidden'
    },
    input: {
        display: 'block',
        width: '100%',
        height: 'calc(1.5em + 0.94rem + 2px)',
        padding: '0.47rem 0.75rem',
        fontSize: '0.8125rem',
        fontWeight: 400,
        lineHeight: 1.5,
        color: '#495057',
        backgroundColor: '#fff',
        backgroundClip: 'padding-box',
        border: '1px solid #ced4da',
        borderRadius: '0.25rem',
        transition: 'borderColor 0.15s ease-in-out, box-shadow 0.15s ease-in-out',
        '&[type="date"]::-webkit-calendar-picker-indicator': {
            background: 'transparent',
            bottom: 0,
            color: 'transparent',
            cursor: 'pointer',
            height: 'auto',
            left: 0,
            position: 'absolute',
            right: 0,
            top: 0,
            width: 'auto',
        }
    },
    formLabelMain: {
        fontWeight: 700,
    }
}))

const Events = () => {
    const classes = useStyles();
    const [dateFilters, setDateFilters] = useState({
        'fromDate': null,
        'toDate': null
    });

    // const [selectedNomenclature, setSelectedNomenclature] = useState('');
    // const [selectedNomenclatureType, setSelectedNomenclatureType] = useState('');
    // const [nomenclatures, setNomenclatures] = useState([]);
    // const [nomenclatureTypes, setNomenclatureTypes] = useState([]);

    const [highlightedDays, setHighlightedDays] = useState([]);

    // const [selectedItems, setSelectedItems] = useState([]);
    // const [selectedNomenclatureData, setSelectedNomenclatureData] = useState({});
    const [modal, setModal] = useState(false);
    const [event, setEvent] = useState({});
    // const [lastSelectedDateFilterName, setLastSelectedDateFilterName] = useState('');
    const [eventsLoaded, setEventsLoaded] = useState(false);
    const [clearEventsBtnClicked, setClearEventsBtnClicked] = useState(false);
    const calendarRef = useRef();

    // const [nomenclatureEventDropdown, setNomenclatureEventDropdown] = useState(false)
    // const [eventTypeDropdown, setEventTypeDropdown] = useState(false)
    const [eventSubjects, setEventSubjects] = useState([])

    // const [showMonthDropdown, setShowMonthDropdown] = useState(false);

    const [hasCancelledStatus, setHasCancelledStatus] = useState(true);

    const [selectedNomenclatureDataTest, setSelectedNomenclatureDataTest] = useState({});

    const [severities, setSeverities] = useState({
        'critical': true,
        'high': true,
        'medium': true,
        'low': true,
        'informational': true,
    });

    const [statuses, setStatuses] = useState({
        'unconfirmed': true,
        'confirmed': true,
        'cancelled': true,
    });

    const [types, setTypes] = useState({
        'maintenance': true,
        'upgrade': true,
        'rollback': true,
        'deployment': true,
        'shutdown': true,
        'security': true,
        'third party issue': true,
        'bug fix': true,
        'meeting': true,
        'other': true,
    });

    const severityColor = {
        'critical': '#ff4646',
        'high': '#ec9900',
        'medium': '#caca00',
        'low': '#7d7dec',
        'informational': '#25bef0',
    }

    const iconType = {
        'maintenance': <EngineeringIcon />,
        'upgrade': <UpgradeIcon />,
        'rollback': <KeyboardReturnIcon />,
        'deployment': <LocalShippingIcon />,
        'shutdown': <PowerSettingsNewIcon />,
        'security': <GppGoodIcon />,
        'third party issue': <ReportProblemIcon />,
        'bug fix': <BugReportIcon />,
        'meeting': <GroupsIcon />,
        'other': <MiscellaneousServicesIcon />,
    }

    // const [calendarApi, setCalendarApi] = useState(null);
    const [currentMonth, setCurrentMonth] = useState(null);


    useEffect(() => {
        getNewEventData();
        getAllNomenclatures()
            .then(data => {
                // setNomenclatures(data.result);
            })
    }, [])

    // useEffect(() => {
    //     if (dateFilters.fromDate !== null ||
    //         dateFilters.toDate !== null ||
    //         selectedNomenclatureData?.NomEventSeverity?.length ||
    //         selectedNomenclatureData?.NomEventStatus?.length ||
    //         selectedNomenclatureData?.NomEventType?.length) {
    //         if (dateFilters?.fromDate !== null || dateFilters?.toDate !== null) {
    //             calendarRef.current = new Date(dateFilters[lastSelectedDateFilterName])
    //             // calendarRef.current.calendar.state.currentDate = new Date(dateFilters[lastSelectedDateFilterName])
    //         }
    //         else {
    //             calendarRef.current = new Date()
    //             // calendarRef.current.calendar.state.currentDate = new Date()
    //         }
    //         const properFromDate = getProperDate(dateFilters?.fromDate);
    //         const properToDate = getProperDate(dateFilters?.toDate);

    //         const filters = getNomenclatureFilter(properFromDate, properToDate, selectedNomenclatureData);
    //         getAllEvents(filters)
    //             .then(data => {
    //                 setHighlightedDays(data.result);
    //             })
    //     }
    //     else if (!selectedNomenclatureData?.NomEventSeverity?.length
    //         && !selectedNomenclatureData?.NomEventStatus?.length
    //         && !selectedNomenclatureData?.NomEventType?.length && eventsLoaded && !clearEventsBtnClicked) {
    //         getAllEvents()
    //             .then(data => {
    //                 setHighlightedDays(data.result);
    //             })
    //     }
    //     setClearEventsBtnClicked(false);
    // }, [dateFilters.fromDate,
    // dateFilters.toDate,
    // selectedNomenclatureData?.NomEventSeverity?.length,
    // selectedNomenclatureData?.NomEventStatus?.length,
    // selectedNomenclatureData?.NomEventType?.length])

    useEffect(() => {
        if (dateFilters.fromDate !== null ||
            dateFilters.toDate !== null ||
            selectedNomenclatureDataTest?.NomEventSeverity?.length ||
            selectedNomenclatureDataTest?.NomEventStatus?.length ||
            selectedNomenclatureDataTest?.NomEventType?.length) {

            getNewEventData(currentMonth ? currentMonth : '');
        }
        else if (!selectedNomenclatureDataTest?.NomEventSeverity?.length
            && !selectedNomenclatureDataTest?.NomEventStatus?.length
            && !selectedNomenclatureDataTest?.NomEventType?.length && eventsLoaded && !clearEventsBtnClicked) {
            getAllEvents()
                .then(data => {
                    setHighlightedDays(data.result);
                })
        }
        setClearEventsBtnClicked(false);
    }, [dateFilters.fromDate,
    dateFilters.toDate,
    selectedNomenclatureDataTest?.NomEventSeverity?.length,
    selectedNomenclatureDataTest?.NomEventStatus?.length,
    selectedNomenclatureDataTest?.NomEventType?.length])

    useEffect(() => {
        // currentMonth could be 0 if January is selected
        if (currentMonth || currentMonth === 0) {
            console.log('useEffect currentMonth', currentMonth)
            getNewEventData(currentMonth);
        }
    }, [currentMonth]);

    // const handleNomenclatureChange = (event) => {
    //     setSelectedNomenclature(event);
    //     getNomenclatureTypes(event)
    //         .then(data => {
    //             setNomenclatureTypes(data.result);
    //         })
    // }

    // const handleNomenclatureTypeChange = (event) => {
    //     setSelectedNomenclatureType(event?.alias);
    // }

    // handling click on event on calendar
    const handleEventClick = arg => {
        const event = highlightedDays.filter(e => e.id === arg?.event.id)[0];
        const startDate = event?.startDatetime.split('T')[0];
        const endDate = event?.endDatetime.split('T')[0];
        const startHours = event?.startDatetime.split('T')[1].split(':')[0] + ":" + event?.startDatetime.split('T')[1].split(':')[1];
        const endHours = event?.endDatetime.split('T')[1].split(':')[0] + ":" + event?.endDatetime.split('T')[1].split(':')[1];
        setEvent({
            id: event?.id,
            title: event?.title,
            startDate: startDate,
            endDate: endDate,
            startHours: startHours,
            severity: event?.severity,
            status: event?.status,
            endHours: endHours,
            description: event?.description,
        });
        toggle(event?.id);
    };

    // const handleChangeFilter = (name, e) => {

    //     e.persist();
    //     const date = e.target.value;
    //     const d = new Date(date)
    //     const day = d.getDate();
    //     const month = d.getMonth() + 1;
    //     const year = d.getFullYear();

    //     const dateToCheck = date ? year + '-' + ('0' + month.toString()).slice(-2) + '-' + ('0' + day.toString()).slice(-2) : null;

    //     let formattedFromDate = ''
    //     let formattedToDate = '';

    //     let dateFotmatted = '';
    //     setLastSelectedDateFilterName(name);
    //     if (name === 'toDate') {
    //         dateFotmatted =
    //             dateFilters?.fromDate ?
    //                 dateFilters?.fromDate
    //                 : dateToCheck;
    //         let startDateTimeToCheck = new Date(dateFotmatted);
    //         let endDateTimeToCheck = new Date(dateToCheck);

    //         if (startDateTimeToCheck.getTime() > endDateTimeToCheck.getTime()) {
    //             formattedToDate = dateToCheck
    //             formattedFromDate = formattedToDate;
    //         } else {
    //             formattedToDate = dateToCheck
    //             formattedFromDate = dateFilters?.fromDate;
    //         }
    //     } else if (name === 'fromDate') {
    //         dateFotmatted =
    //             dateFilters?.toDate ?
    //                 dateFilters?.toDate
    //                 : dateToCheck;
    //         let startDateTimeToCheck = new Date(dateToCheck);
    //         let endDateTimeToCheck = new Date(dateFotmatted);

    //         if (startDateTimeToCheck.getTime() > endDateTimeToCheck.getTime()) {
    //             formattedFromDate = dateToCheck
    //             formattedToDate = formattedFromDate;
    //         } else {
    //             formattedFromDate = dateToCheck
    //             formattedToDate = dateFilters?.toDate;
    //         }
    //     }

    //     //change both dates to the yyyy-mm-dd format
    //     formattedFromDate = formattedFromDate ?
    //         formattedFromDate
    //         : dateToCheck
    //     formattedToDate = formattedToDate ?
    //         formattedToDate
    //         : dateToCheck

    //     setDateFilters((prevState) => {
    //         return ({
    //             ...prevState,
    //             ['fromDate']: formattedFromDate,
    //             ['toDate']: formattedToDate
    //         })
    //     })
    // }

    // const handleMonthSelect = (event) => {
    //     const newMonth = event.target.value;
    //     if (calendarApi) {
    //         calendarApi.gotoDate(newMonth);
    //     }

    //     setShowMonthDropdown(false);
    // };

    // const handleAddItemClick = () => {
    //     let correctNomenclatureType = selectedNomenclatureType ? selectedNomenclatureType :
    //         (nomenclatureTypes?.length ? nomenclatureTypes[0].alias : '')

    //     if (correctNomenclatureType && !selectedItems.filter(el => el.selectedNomenclatureType === correctNomenclatureType)[0]) {
    //         setSelectedItems((prevState) => {
    //             return [
    //                 ...prevState,
    //                 { 'selectedNomenclatureType': correctNomenclatureType, 'selectedNomenclature': selectedNomenclature }
    //             ]
    //         });

    //         setSelectedNomenclatureData((prevState) => {
    //             return {
    //                 ...prevState,
    //                 [selectedNomenclature]: prevState[selectedNomenclature]
    //                     ? [...prevState[selectedNomenclature], getNomenclatureIdForApi(selectedNomenclature, correctNomenclatureType)]
    //                     : [getNomenclatureIdForApi(selectedNomenclature, correctNomenclatureType)]
    //             }
    //         })
    //     }
    //     if (selectedNomenclatureType !== correctNomenclatureType) {
    //         setSelectedNomenclatureType(correctNomenclatureType);
    //     }
    // };

    // const handleRemoveItemClick = (itemToRemove) => {
    //     setSelectedItems(selectedItems.filter((item) => item.selectedNomenclatureType !== itemToRemove.selectedNomenclatureType));
    //     const idOfItemToRemove = getNomenclatureIdForApi(itemToRemove['selectedNomenclature'], itemToRemove['selectedNomenclatureType'])

    //     setSelectedNomenclatureData((prevState) => {
    //         const updatedNomenclature = prevState[itemToRemove.selectedNomenclature].filter(
    //             (id) => id !== idOfItemToRemove
    //         );
    //         return {
    //             ...prevState,
    //             [itemToRemove.selectedNomenclature]: updatedNomenclature
    //         }
    //     })
    // };

    const handleChangeEventFilter = (e, type) => {
        const eventName = e.target.name;
        if (type === 'severity') {

            setSeverities((prevState) => {
                return {
                    ...prevState,
                    [eventName]: e.target.checked
                }
            })
            setSelectedNomenclatureDataTest((prevState) => {
                return {
                    ...prevState,
                    ['NomEventSeverity']: prevState['NomEventSeverity']
                        ? [...prevState['NomEventSeverity'], getNomenclatureIdForApi('NomEventSeverity', eventName)]
                        : [getNomenclatureIdForApi('NomEventSeverity', eventName)]
                }
            })
        } else if (type === 'status') {
            if (eventName === 'cancelled') {
                setHasCancelledStatus(!hasCancelledStatus)
            }
            setStatuses((prevState) => {
                return {
                    ...prevState,
                    [eventName]: e.target.checked
                }
            })
            setSelectedNomenclatureDataTest((prevState) => {
                return {
                    ...prevState,
                    ['NomEventStatus']: prevState['NomEventStatus']
                        ? [...prevState['NomEventStatus'], getNomenclatureIdForApi('NomEventStatus', eventName)]
                        : [getNomenclatureIdForApi('NomEventStatus', eventName)]
                }
            })
        } else if (type === 'type') {
            setTypes((prevState) => {
                return {
                    ...prevState,
                    [eventName]: e.target.checked
                }
            })
            setSelectedNomenclatureDataTest((prevState) => {
                return {
                    ...prevState,
                    ['NomEventType']: prevState['NomEventType']
                        ? [...prevState['NomEventType'], getNomenclatureIdForApi('NomEventType', eventName)]
                        : [getNomenclatureIdForApi('NomEventType', eventName)]
                }
            })
        }
    }

    // const clearNomenclature = () => {
    //     setDateFilters((prevState) => ({
    //         'fromDate': null,
    //         'toDate': null,
    //     }));
    //     calendarRef.current = new Date();

    //     setSelectedNomenclature('');
    //     setSelectedNomenclatureType('');
    //     setSelectedNomenclatureData({});
    //     setSelectedItems([]);
    //     setNomenclatureTypes([]);
    //     setClearEventsBtnClicked(true);
    //     getAllEvents()
    //         .then(data => {
    //             setHighlightedDays(data.result);
    //         })
    //     getAllNomenclatures()
    //         .then(data => {
    //             setNomenclatures(data.result);
    //         })
    // }

    const getNewEventData = (newMonth = '') => {
        const currentDate = new Date(calendarRef?.current?.calendar?.currentData?.currentDate);
        // Get raw dates with the provided month or currentDate 
        const startRawDate = new Date(currentDate.getFullYear(), newMonth ? newMonth : currentDate.getMonth(), 1);
        const endRawDate = new Date(currentDate.getFullYear(), newMonth ? newMonth + 1 : currentDate.getMonth() + 1, 0);

        const properFromDate = getProperFromAndEndDate(startRawDate);
        const properToDate = getProperFromAndEndDate(endRawDate);
        const filters = getNomenclatureFilterTest(properFromDate, properToDate, selectedNomenclatureDataTest);
        getAllEvents(filters)
            .then(data => {
                setEventsLoaded(true);
                setHighlightedDays(data.result);
            })
    }

    const getProperFromAndEndDate = (date) => {
        let day = date.getDate();
        let month = date.getMonth() + 1;
        let year = date.getFullYear();

        const properDate = date ?
            month + '/' + day + '/' + year
            :
            ''
        return properDate;
    }

    // const getNomenclatureFilter = (properFromDate, properToDate, selectedNomenclatureData) => {
    //     let filter = [];
    //     if (properFromDate) {
    //         filter.push(`fromDate=${properFromDate}`)
    //     }
    //     if (properToDate) {
    //         filter.push(`toDate=${properToDate}`)
    //     }
    //     Object.keys(selectedNomenclatureData).forEach((nomenclature) => {
    //         if (selectedNomenclatureData[nomenclature].length) {
    //             const nomenclatureApiName = getNomenclatureNameForApi(nomenclature)
    //             filter.push(`${nomenclatureApiName}=${selectedNomenclatureData[nomenclature]}`)
    //         }
    //     })
    //     filter = filter.length ? '?' + filter.join('&') : ''
    //     return filter;
    // }

    const getNomenclatureFilterTest = (properFromDate, properToDate, selectedNomenclatureData) => {
        let filter = [];
        if (properFromDate) {
            filter.push(`fromDate=${properFromDate}`)
        }
        if (properToDate) {
            filter.push(`toDate=${properToDate}`)
        }

        const severityIdFilters = [];
        const statusIdFilters = [];
        const typeIdFilters = [];
        Object.keys(severities).forEach((type) => {
            if (severities[type] === true) {
                const id = getNomenclatureIdForApi('NomEventSeverity', type);
                severityIdFilters.push(id);
            }
        })
        Object.keys(statuses).forEach((type) => {
            if (statuses[type] === true) {
                const id = getNomenclatureIdForApi('NomEventStatus', type);
                statusIdFilters.push(id);
            }
        })
        Object.keys(types).forEach((type) => {
            if (types[type] === true) {
                const id = getNomenclatureIdForApi('NomEventType', type);
                typeIdFilters.push(id);
            }
        })

        severityIdFilters?.length && filter.push(`severitiesIds=${severityIdFilters}`)
        statusIdFilters?.length && filter.push(`statusesIds=${statusIdFilters}`)
        typeIdFilters?.length && filter.push(`eventTypesIds=${typeIdFilters}`)

        filter = filter.length ? '?' + filter.join('&') : ''
        return filter;
    }

    // get correct event names for the week days
    const getHighlatedDays = () => {
        return highlightedDays?.map((event) => {
            const isCancelled = event.status === 'cancelled' ? true : false
            const backgroundColor = isCancelled ? '#E0E0E0' : (severityColor[event?.severity] ? severityColor[event?.severity] : 'blue')

            return {
                id: event.id,
                title: event.title,
                start: event.startDatetime,
                end: event.endDatetime,
                severity: event.severity,
                type: event.type,
                status: event.status,
                description: event.description,
                backgroundColor: backgroundColor,
            }
        })
    }

    // handling the modal state
    const toggle = (eventId = null) => {
        if (modal) {
            setModal(false);
            setEvent(null);
            setEventSubjects([]);
        } else {
            setModal(true);

            if (eventId) {
                getEventById(eventId)
                    .then(data => {
                        setEventSubjects((prevState) => {
                            return data?.result?.subjects
                        })
                    })
            }
        }
    };

    // events shown in each calendar day 
    const eventContent = (arg) => {
        const event = highlightedDays.filter(event => event.id === arg.event.id)[0]
        const cancelledIcon = event?.status === 'cancelled' ? <CloseIcon sx={{ color: 'red' }} /> : null
        const Icon = iconType[event?.type] ? iconType[event?.type] : null

        const localeTimeString = arg.event.start.toLocaleTimeString();

        const formatHours = ('0' + localeTimeString.split(' ')[0].split(':')[0]).slice(-2);
        const formatMinutes = ('0' + localeTimeString.split(' ')[0].split(':')[1]).slice(-2);
        const amPmformat = localeTimeString.split(' ')[1];
        const time = `${formatHours}:${formatMinutes} ${amPmformat}`;

        return (
            <div className={classes.customEvent}>
                <Box sx={{ display: 'inline-block', mr: '20px', fontWeight: '600', fontSize: '1em' }}>{time}</Box>
                {cancelledIcon ? <Box sx={{ display: 'inline-block', mr: '10px' }}>{cancelledIcon}</Box> : null}
                <Box sx={{ display: 'inline-block', mr: '10px' }}>{Icon}</Box>
                <Box sx={{ display: 'inline-block', fontWeight: '700' }}>{arg.event.title}</Box>
            </div>
        );
    };

    return (
        <>
            <LocalizationProvider dateAdapter={AdapterDayjs}>
                <div className="page-content">
                    <div className="container-fluid containter-nav-tabs">
                        <Card className="card-fix-height">
                            {/* <Typography className={classes.titleText} sx={{ ...helpers.colorBasedOnTheme }}>Calendar</Typography> */}
                            {/* <Row className={classes.filterHeader}>
                                <Row>
                                    <Col className={classes.datePickerFromDate}>
                                        <label className="form-label">Start Date</label>
                                        <input
                                            className={classes.input}
                                            type="date"
                                            value={dateFilters?.fromDate ? dateFilters?.fromDate : 'dd/mm/yyyy'}
                                            onChange={(e) => handleChangeFilter('fromDate', e)}
                                            id="fromDate-input"
                                        />
                                    </Col>
                                    <Col className={classes.datePickerToDate}>
                                        <div>
                                            <label className="form-label">End Date</label>
                                            <input
                                                className={classes.input}
                                                type="date"
                                                value={dateFilters?.toDate ? dateFilters?.toDate : 'dd/mm/yyyy'}
                                                onChange={(e) => handleChangeFilter('toDate', e)}
                                                id="toDate-input"
                                            />
                                        </div>
                                    </Col>
                                    <Col className={classes.filterColumn}>
                                        <label className="form-label">Nomenclature event</label>
                                        <Dropdown
                                            isOpen={nomenclatureEventDropdown}
                                            toggle={() => setNomenclatureEventDropdown(!nomenclatureEventDropdown)}
                                        >
                                            <DropdownToggle tag="button" className="btn btn-primary">
                                                {selectedNomenclature ? selectedNomenclature : 'Select a nomenclature'}
                                                <i className="mdi mdi-chevron-down" />
                                            </DropdownToggle>
                                            <DropdownMenu>
                                                <DropdownItem onClick={() => setSelectedNomenclature('')}>No nomenclature</DropdownItem>
                                                <div className="dropdown-divider"></div>
                                                {
                                                    nomenclatures?.length && nomenclatures.map((item) => {
                                                        return <DropdownItem onClick={() => handleNomenclatureChange(item)} value={item}>{item}</DropdownItem>
                                                    })
                                                }
                                            </DropdownMenu>
                                        </Dropdown>
                                    </Col>
                                    {selectedNomenclature
                                        ?
                                        <Col className={classes.filterColumn}>
                                            <label className="form-label">Event Type</label>
                                            <Dropdown
                                                isOpen={eventTypeDropdown}
                                                toggle={() => setEventTypeDropdown(!eventTypeDropdown)}
                                            >
                                                <DropdownToggle tag="button" className="btn btn-primary">
                                                    {selectedNomenclatureType ? selectedNomenclatureType : 'Select event type'}
                                                    <i className="mdi mdi-chevron-down" />
                                                </DropdownToggle>
                                                <DropdownMenu>
                                                    <div className="dropdown-divider"></div>
                                                    {
                                                        nomenclatureTypes?.length && nomenclatureTypes.map((item) => {
                                                            return <DropdownItem onClick={() => handleNomenclatureTypeChange(item)} value={item.alias}>{item.alias}</DropdownItem>
                                                        })
                                                    }
                                                </DropdownMenu>
                                            </Dropdown>
                                        </Col>
                                        :
                                        null}
                                    {selectedNomenclature
                                        ?
                                        <Col className={classes.addBtn}>
                                            <Button onClick={handleAddItemClick} color={'primary'}>Add filter</Button>
                                        </Col>
                                        :
                                        null
                                    }
                                    <Col className={classes.addBtn}>
                                        {
                                            dateFilters?.fromDate ||
                                                dateFilters?.toDate ||
                                                selectedNomenclatureData?.NomEventSeverity?.length ||
                                                selectedNomenclatureData?.NomEventStatus?.length ||
                                                selectedNomenclatureData?.nomenclatureType?.length
                                                ?
                                                <Button onClick={clearNomenclature} color={'primary'}>Clear filters</Button>
                                                :
                                                null
                                        }
                                    </Col>
                                </Row>
                            </Row> */}

                            {/* <Col>
                                <Box mt={'20px'}>
                                    <Col className={classes.title}>
                                        {selectedItems.length > 0 && <label className="form-label">Event Type</label>}
                                    </Col>
                                    <Box className={classes.selectedItemsContainer}>
                                        {selectedItems && selectedItems.map((item) => (
                                            <Chip
                                                key={item.selectedNomenclatureType}
                                                label={item.selectedNomenclatureType}
                                                onDelete={() => handleRemoveItemClick(item)}
                                                className={classes.selectedChip}
                                            />
                                        ))}
                                    </Box>
                                </Box>
                            </Col> */}

                            <Col>
                                <Box mt={'20px'}>
                                    <Col className={classes.title}>
                                        <label className="form-label">Severity filter:</label>
                                        <Box sx={{ display: 'inline-block', marginLeft: '15px' }}>
                                            {Object.entries(severities).map(([key, value], i) => (
                                                <FormControlLabel
                                                    label={key}
                                                    control={
                                                        <Checkbox
                                                            checked={value}
                                                            name={key}
                                                            onChange={(e) => handleChangeEventFilter(e, 'severity')}
                                                            sx={{
                                                                "&.Mui-checked": {
                                                                    color: severityColor[key]
                                                                }
                                                            }}
                                                        />
                                                    }
                                                />
                                            ))}
                                            <FormControlLabel
                                                label={'cancelled'}
                                                control={
                                                    <Checkbox
                                                        checked={hasCancelledStatus}
                                                        name={'cancelled'}
                                                        onChange={(e) => handleChangeEventFilter(e, 'status')}
                                                        sx={{
                                                            "&.Mui-checked": {
                                                                color: 'grey'
                                                            }
                                                        }}
                                                    />
                                                }
                                            />
                                        </Box>
                                    </Col>
                                </Box>
                            </Col>

                            <Col>
                                <Box mt={'20px'}>
                                    <Col className={classes.title}>
                                        <label className="form-label">Type filter:</label>
                                        <Box sx={{ display: 'inline-block', marginLeft: '15px' }}>
                                            {Object.entries(types).map(([key, value], i) => (
                                                <FormControlLabel
                                                    label={key}
                                                    control={
                                                        <>
                                                            <Checkbox
                                                                sx={{ ml: '5px' }}
                                                                checked={value}
                                                                name={key}
                                                                onChange={(e) => handleChangeEventFilter(e, 'type')}
                                                                color='secondary'
                                                            />
                                                            <Box sx={{ mr: '2px' }}>{iconType[key]}</Box>
                                                        </>
                                                    }
                                                />
                                            ))}
                                        </Box>
                                    </Col>
                                </Box>
                            </Col>


                            <div className={classes.fullCalendar}>
                                <FullCalendar
                                    plugins={[
                                        BootstrapTheme,
                                        dayGridPlugin,
                                        timeGridPlugin,
                                    ]}
                                    ref={calendarRef}
                                    // slotDuration={"00:15:00"}
                                    handleWindowResize={true}
                                    initialView={'dayGridMonth'}

                                    height={700}
                                    datesSet={event => {
                                        // As the calendar starts from prev month and end in next month I take the day between the rang
                                        let currentMonth = new Date(calendarRef?.current?.calendar?.currentData?.currentDate).getMonth();
                                        setCurrentMonth(currentMonth);
                                    }}
                                    headerToolbar={{
                                        start: "",
                                        center: "prev title next",
                                        end: "today dayGridMonth,timeGridWeek,timeGridDay",
                                    }}
                                    eventDisplay={'block'}
                                    themeSystem={'bootstrap'}
                                    slotEventOverlap={false}
                                    eventRender={info => {
                                        info.el.style.marginLeft = '30px'
                                        info.el.style.borderRadius = '10px'
                                    }}
                                    events={getHighlatedDays()}
                                    eventClick={handleEventClick}
                                    eventContent={eventContent}
                                    customButtons={{
                                        'custom-header': {
                                            text: 'Custom Header',
                                            click: () => {
                                                // Handle the click event if needed
                                            },
                                        },
                                    }}
                                // headerToolbar={headerToolbarOptions}
                                // dayCellContent={renderDayCellContent}
                                // onReady={({ calendar }) => {
                                //     setCalendarApi(calendar);
                                // }}
                                />
                                {/* {showMonthDropdown && (
                                    <select className="month-dropdown" onChange={handleMonthSelect}>
                                        {calendarApi &&
                                            calendarApi.getDate().toLocaleString('default', { month: 'long' })}

                                        {Array.from({ length: 12 }, (_, i) => {
                                            const month = new Date(0, i);
                                            return (
                                                <option
                                                    key={i}
                                                    value={month}
                                                >
                                                    {month.toLocaleString('default', { month: 'long' })}
                                                </option>
                                            );
                                        })}
                                    </select>
                                )} */}
                            </div>

                            <Modal
                                isOpen={modal}
                                centered
                                toggle={() => setModal(false)}
                            >
                                <ModalHeader toggle={toggle} tag="h5" className="py-3 px-4 border-bottom-0">
                                </ModalHeader>
                                <ModalBody className="p-4">
                                    <Form>
                                        <Row>
                                            <Col className="col-6">
                                                <div className="mb-3">
                                                    <Label className={classes.formLabelMain}>Event Name</Label>
                                                    <Input
                                                        name="title"
                                                        type="text"
                                                        disabled={true}
                                                        value={event ? event?.title : ""}
                                                    />
                                                </div>
                                            </Col>
                                            <Col className="col-12">
                                                <div className="mb-3">
                                                    <Label className={classes.formLabelMain}>Start date</Label>
                                                    <Input
                                                        name="startTime"
                                                        type="text"
                                                        disabled={true}
                                                        value={event ? event?.startDate : ""}
                                                    />
                                                </div>
                                            </Col>
                                            <Col className="col-12">
                                                <div className="mb-3">
                                                    <Label className={classes.formLabelMain}>End date</Label>
                                                    <Input
                                                        name="endTime"
                                                        type="text"
                                                        disabled={true}
                                                        value={event ? event?.endDate : ""}
                                                    />
                                                </div>
                                            </Col>
                                            <Col className="col-12">
                                                <div className="mb-3">
                                                    <Label className={classes.formLabelMain}>Start hours</Label>
                                                    <Input
                                                        name="startTime"
                                                        type="text"
                                                        disabled={true}
                                                        value={event ? event?.startHours : ""}
                                                    />
                                                </div>
                                            </Col>
                                            <Col className="col-12">
                                                <div className="mb-3">
                                                    <Label className={classes.formLabelMain}>End hours</Label>
                                                    <Input
                                                        name="endTime"
                                                        type="text"
                                                        disabled={true}
                                                        value={event ? event?.endHours : ""}
                                                    />
                                                </div>
                                            </Col>
                                            <Col className="col-12">
                                                <div className="mb-3">
                                                    <Label className={classes.formLabelMain}>Severity</Label>
                                                    <Input
                                                        name="status"
                                                        type="text"
                                                        disabled={true}
                                                        value={event ? event?.severity : ""}
                                                    />
                                                </div>
                                            </Col>
                                            <Col className="col-12">
                                                <div className="mb-3">
                                                    <Label className={classes.formLabelMain}>Status</Label>
                                                    <Input
                                                        name="status"
                                                        type="text"
                                                        disabled={true}
                                                        value={event ? event?.status : ""}
                                                    />
                                                </div>
                                            </Col>
                                            {eventSubjects?.length &&
                                                <Col className="col-12">
                                                    <div className="mb-3">
                                                        <Label className={classes.formLabelMain}>Event subjects</Label>
                                                        {
                                                            eventSubjects?.length > 0 && eventSubjects?.map((subject) => {
                                                                return <div className="mb-4">
                                                                    <Label className="form-label">Subject name</Label>
                                                                    <Input
                                                                        name="status"
                                                                        type="text"
                                                                        disabled={true}
                                                                        value={subject ? subject?.name : ""}
                                                                    />
                                                                    {
                                                                        subject.deploymentType &&
                                                                        <>
                                                                            <Label className="form-label">Deployment type</Label>
                                                                            <Input
                                                                                name="status"
                                                                                type="text"
                                                                                disabled={true}
                                                                                value={subject.deploymentType}
                                                                            />
                                                                        </>
                                                                    }
                                                                </div>
                                                            })
                                                        }
                                                    </div>
                                                </Col>
                                            }
                                            <Col className="col-12">
                                                <div className="mb-3">
                                                    <Label className={classes.formLabelMain}>Description</Label>
                                                    <TextareaAutosize
                                                        name="description"
                                                        className='form-control'
                                                        disabled={true}
                                                        value={event ? event?.description : ""}
                                                    />
                                                </div>
                                            </Col>
                                        </Row>

                                        <Row className="mt-2">
                                            <Col className="col-12 text-center">
                                                <button
                                                    type="button"
                                                    className="btn btn-light me-2"
                                                    onClick={toggle}
                                                >
                                                    Close
                                                </button>
                                            </Col>
                                        </Row>
                                    </Form>
                                </ModalBody>
                            </Modal>
                        </Card>
                    </div>
                </div >
            </LocalizationProvider >
        </>
    )
}

export default Events;