import {DateCalendar} from "@mui/x-date-pickers/DateCalendar";
import {Paper} from "@mui/material";
import React from "react";
import Badge from "@mui/material/Badge";
import {PickersDay} from "@mui/x-date-pickers/PickersDay";
import dayjs from "dayjs";

const DayRenderer = (params) => {
    const {stagesByDate = [], day, outsideCurrentMonth, ...other} = params;
    const dayKey = params.day.date() + "-" + params.day.month();
    const events = stagesByDate[dayKey] || [];
    const isStage = events.length > 0;

    return (
        <Badge
            key={params.day.toString()}
            overlap="circular"
            badgeContent={isStage ? '🏆' : undefined}
            sx={{color: 'var(--mui-palette-text-primary)'}}
        >
            <PickersDay {...other} outsideCurrentMonth={outsideCurrentMonth} day={day}
                // disabled
                        sx={{pointerEvents: 'none'}}/>
        </Badge>
    );
}

const Calendar = ({viewDate, setViewDate, stagesByDate}) => {
    return (
        <Paper
            variant="outlined"
            sx={{
                borderRadius: 2,
                boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
            }}
        >
            <DateCalendar
                defaultValue={dayjs()}
                onMonthChange={(newValue) => {
                    if (newValue.month() !== viewDate.month) {
                        setViewDate(newValue);
                    }
                }}
                showDaysOutsideCurrentMonth
                sx={{
                    height: '100%',
                    '.MuiDayCalendar-dayButton': {
                        minHeight: {xs: 80, sm: 100},
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                        p: 1,

                    },
                    '.MuiPickersDay-root': {
                        fontSize: {xs: '1rem', sm: '1.1rem'},

                    },
                    '&.MuiPickersDay-root[data-selected="true"]': {
                        backgroundColor: 'primary.secondary',
                        color: 'white',
                    },
                    '&.MuiPickersDay-root:has(.event-chip)': {
                        border: '2px solid',
                        borderColor: 'primary.main',
                    },
                }}
                slots={{
                    day: DayRenderer
                }}
                slotProps={{
                    day: {
                        stagesByDate
                    }
                }}
            />
        </Paper>
    )
}

export default Calendar;