import {Box, Chip, ListItemButton, Typography} from "@mui/material";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import React from "react";
import {Link} from 'react-router-dom';

const CalendarDrawerContent = ({filteredStages, viewDate}) => {
    return (
        <Box sx={{p: 3, minWidth: 280}}>
            <Typography variant="h6" gutterBottom>
                Этапы на{' '}
                {viewDate.format('MMMM YYYY')}
            </Typography>
            {/*todo: убрать этот блок, если не понадобиться кнопка для отображения пустых месяцев*/}
            {filteredStages.length === 0 ? (
                <Typography color="text.secondary" sx={{mt: 2}}>
                    Нет этапов в этом месяце
                </Typography>
            ) : (
                <List sx={{mt: 2}}>
                    {filteredStages.map((stage) => (
                        <ListItem
                            key={stage.id}
                                  sx={{
                                      mb: 1,
                                      borderBottom: '1px solid',
                                      borderColor: 'divider',
                                      display: 'flex',
                                      width: '100%',
                                      // '&:hover': {
                                      //     backgroundColor: 'action.selected',
                                      //     transform: 'translateY(-2px)',
                                      //     boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
                                      // }
                        }} >
                            <ListItemButton component={Link} to={`/stages/${stage.id}`}
                                            // style={{textDecoration: 'none'}}
                                            sx={{
                                                display: 'flex',
                                                alignItems: 'center',
                                                width: '100%',
                                                px: 1,
                                                py: 1.5,
                                                borderRadius: 2,
                                                '&:hover': {
                                                //     backgroundColor: 'action.selected',
                                                    transform: 'translateY(-2px)',
                                                    boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
                                                }
                                                // Убираем hover здесь — он уже на ListItem
                                                // transform: 'translateY(-2px)',
                                            }}
                                  key={stage.id}>
                                <Box
                                    width='100%'
                                    sx={{
                                        flexGrow: 1,
                                        px: 1,
                                        display: 'flex',
                                        flexDirection: 'column',
                                        justifyContent: 'center',
                                    }}
                                >
                                    <Typography variant="subtitle1" fontWeight="bold" color={'text.primary'}>
                                        {stage.title}
                                    </Typography>
                                    <Typography variant="body2" color="text.secondary">
                                        {stage.stage} · {stage.class}
                                    </Typography>
                                    <Box sx={{mt: 0.5}}>
                                        <Chip
                                            label={stage.status}
                                            size="small"
                                            color={
                                                stage.status === 'Идёт'
                                                    ? 'warning'
                                                    : stage.status === 'Регистрация открыта'
                                                        ? 'success'
                                                        : 'info'
                                            }
                                            sx={{fontSize: '0.8rem'}}
                                        />
                                    </Box>
                                </Box>
                            </ListItemButton>
                        </ListItem>
                    ))}
                </List>
            )}
        </Box>
    )
}

export default CalendarDrawerContent;