import React, { useState } from 'react';
import type { Dayjs } from 'dayjs';
import { alpha } from '@mui/material/styles';
import { darkSwitch, darkSwitchGrey } from '../../util';
import type { Event } from '../../types';

import Box from '@mui/material/Box';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import Typography from '@mui/material/Typography';
import CalendarEvent from './calendar-event';
import CalendarPopup from './calendar-popup';

interface CalendarDayPopup {
    /** List of all events for the current day */
    activities: Event[];

    /** Date to display */
    date: Dayjs;

    /** Number of rows in the current month */
    rows: number;

    /** If true, will not show the right border */
    noRight?: boolean;

    /** If true, will color the box green */
    isToday?: boolean;

    /** If true, will color the box grey */
    otherMonth?: boolean;
}

/**
 * Represents a single grid cell in the calendar view.
 * The CalendarDay will render a list of events for the day
 * up to a certain limit, and will render a button that the
 * user can click to see more events.
 */
const CalendarDay = (props: CalendarDayPopup) => {
    const [popupOpen, setPopupOpen] = useState(false);

    // Switches the popup state to open if clicked
    const togglePopup = (open: boolean) => setPopupOpen(open);

    // Calculates how many extra events there are that can't fit
    // and slices the array accordingly
    const maxActivities = props.rows === 5 ? 3 : 4;
    const extraActivities = Math.max(props.activities.length - maxActivities, 0);
    const activities = extraActivities > 0 ? props.activities.slice(0, maxActivities) : props.activities;

    return (
        <Box
            sx={{
                borderBottom: (theme) =>
                    `1px solid ${darkSwitch(theme, theme.palette.grey[300], theme.palette.grey[700])}`,
                borderRight: (theme) =>
                    props.noRight
                        ? 'none'
                        : `1px solid ${darkSwitch(theme, theme.palette.grey[300], theme.palette.grey[700])}`,
                cursor: 'pointer',
                transition: '0.2s',
                '&:hover': {
                    backgroundColor: (theme) => darkSwitch(theme, alpha(theme.palette.grey[200], 0.9), theme.palette.grey[800]),
                },
            }}
            onClick={togglePopup.bind(this, true)}
        >
            <Typography
                sx={{
                    margin: 0.5,
                    padding: 0.5,
                    minWidth: 28,
                    height: 28,
                    fontSize: '1rem',
                    color: (theme) =>
                        props.isToday
                            ? theme.palette.primary.main
                            : props.otherMonth
                            ? darkSwitch(theme, theme.palette.grey[400], theme.palette.grey[700])
                            : 'inherit',
                }}
            >
                {props.date.date()}
            </Typography>
            <List sx={{ paddingTop: 0 }}>
                {activities.map((a) => (
                    <CalendarEvent activity={a} key={a.id} />
                ))}
                {extraActivities === 0 ? null : (
                    <ListItem sx={{ padding: 0 }}>
                        <Typography
                            sx={{
                                width: '100%',
                                fontSize: { lg: '0.8rem', xs: '0.5rem' },
                                textAlign: 'center',
                                color: (theme) => darkSwitchGrey(theme),
                            }}
                        >
                            {`+${extraActivities} more event(s)`}
                        </Typography>
                    </ListItem>
                )}
            </List>
            <CalendarPopup
                activities={props.activities}
                date={props.date}
                open={popupOpen}
                close={togglePopup.bind(this, false)}
            />
        </Box>
    );
};

export default CalendarDay;