import {Box, Chip, Paper, Typography} from "@mui/material";
import {STAGE_STATUSES} from "../../data/constants";
import React from "react";

const StagesHeader = ({stage}) => {
    return(
        <Paper sx={{p: 4, mb: 4}} variant="outlined">
            <Typography variant="h4" gutterBottom>{stage.title}</Typography>
            <Typography variant="h6" color="text.secondary" gutterBottom>
                {stage.stage.name}
            </Typography>

            <Box sx={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 3, mt: 2}}>
                <Box>
                    <Typography variant="subtitle2" color="text.secondary">Дата</Typography>
                    <Typography>
                        {new Date(stage.date).toLocaleDateString('ru-RU', {
                            weekday: 'long',
                            day: 'numeric',
                            month: 'long',
                            year: 'numeric'
                        })}
                    </Typography>
                </Box>
                <Box>
                    <Typography variant="subtitle2" color="text.secondary">Место</Typography>
                    <Typography>{stage.location}</Typography>
                </Box>
                <Box>
                    <Typography variant="subtitle2" color="text.secondary">Класс</Typography>
                    <Typography>{stage.class}</Typography>
                </Box>
                <Box>
                    <Typography variant="subtitle2" color="text.secondary">Статус</Typography>
                    <Chip
                        label={stage.status}
                        color={
                            stage.status === STAGE_STATUSES.GOING
                                ? 'warning'
                                : stage.status === STAGE_STATUSES.REGISTRATION_OPEN
                                    ? 'success'
                                    : stage.status === STAGE_STATUSES.PRE_REGISTRATION
                                        ? 'info'
                                        : 'default'
                        }
                        sx={{
                            backgroundColor:
                                stage.status === STAGE_STATUSES.GOING
                                    ? 'warning.dark'
                                    : stage.status === STAGE_STATUSES.REGISTRATION_OPEN
                                        ? 'success.dark'
                                        : stage.status === STAGE_STATUSES.PRE_REGISTRATION
                                            ? 'info.dark'
                                            : 'grey.300',
                            color: 'white',
                            fontWeight: 500,
                            fontSize: '0.8rem'
                        }}
                    />
                </Box>
            </Box>

            {stage.description && (
                <Typography variant="body1" paragraph sx={{mt: 3}}>
                    {stage.description}
                </Typography>
            )}
        </Paper>
    )
}

export default StagesHeader;