// src/routes/RacetrackDetail.jsx
import React from 'react';
import {useParams} from 'react-router-dom';
import {Box, Card, CardMedia, Container, Typography} from '@mui/material';
import {Link} from 'react-router-dom';
import {places} from "../../../data/constants";
import Carousel from "react-material-ui-carousel";
import Paper from "@mui/material/Paper";
import IconButton from "@mui/material/IconButton";
import KeyboardReturnIcon from '@mui/icons-material/KeyboardReturn';
import {paths} from "../../../path";

const PlacePage = () => {
    const {id} = useParams();
    // Здесь должен быть код для получения данных трассы по ID
    let track = places.find((t) => t.id === Number(id));
    if (!track) {
        return <Typography>Трасса не найдена</Typography>;
    }

    // track = undefined;
    return (
        <Container maxWidth="lg" sx={{py: 4}}>
            <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                <Typography variant="h5">{track.name}</Typography>
                <IconButton component={Link} to={paths.places.places}>
                    <KeyboardReturnIcon/>
                </IconButton>
            </Box>
            <Box sx={{mt: 3}}>
                <Carousel
                    swipe
                    sx={{
                        height: 400, // фиксированная высота карусели
                        '& .MuiCard-root': {
                            height: '100%',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                        },
                    }}
                >
                    {track.images.map((item, index) => (
                        <Card key={index}  sx={{ width: '100%', height: '100%' }}>
                            <CardMedia
                                image={item}
                                alt={item}
                                component="img"
                                sx={{
                                    width: '100%',
                                    height: 'auto',
                                    maxHeight: '100%',
                                    objectFit: 'cover', // сохраняет пропорции, заполняет контейнер
                                    objectPosition: 'center', // центрирует изображение
                                }}
                            />
                        </Card>
                    ))}
                </Carousel>

            </Box>
            <Box sx={{mt: 3}}>
                <Typography variant="subtitle1">Адрес:</Typography>
                <Typography variant="body1">{track.address || 'Не указан'}</Typography>
            </Box>
            <Box sx={{mt: 2}}>
                <Typography variant="subtitle1">Тип площадки:</Typography>
                <Typography variant="body1">{track.type}</Typography>
            </Box>
            {track.capacity && (
                <Box sx={{mt: 2}}>
                    <Typography variant="subtitle1">Вместимость:</Typography>
                    <Typography variant="body1">{track.capacity} человек</Typography>
                </Box>
            )}
            <Box sx={{mt: 2}}>
                <Typography variant="subtitle1">Контактные данные:</Typography>
                <Typography variant="body1">{track.contact}</Typography>
            </Box>
            <Box sx={{mt: 2}}>
                <Typography variant="subtitle1">Номер бронирования:</Typography>
                <Typography variant="body1">{track.bookingNumber}</Typography>
            </Box>
        </Container>
    );
};

export default PlacePage;
