import { Modal, Button } from 'react-bootstrap'
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'

import LineDot from './LineDot'
import { categoryNames } from '../assets/category'
import { useBook } from '../hooks/api'

function AnnouncementDetails({ close, announcement: { id, name, category, bestBy, description, lat, lng, address, metro } }) {
    const { handleBook, status: bookStatus } = useBook(id)

    return (
        <div
            className="modal"
            style={{ display: 'flex', alignItems: "center", justifyContent: "center" }}
        >
            <Modal.Dialog style={{ minWidth: "50vw" }}>
                <Modal.Header closeButton onHide={close}>
                    <Modal.Title>
                        Подробнее
                    </Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <h1>{name}</h1>

                    <span>{categoryNames.get(category)}</span>
                    <span className='m-2'>&#x2022;</span>{/* dot */}
                    <span>Годен до {new Date(bestBy).toLocaleString('ru-RU')}</span>

                    <p className='mb-3'>{description}</p>

                    <MapContainer style={{ width: "100%", minHeight: 300 }} center={[lat, lng]} zoom={16} >
                        <TileLayer
                            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                        />

                        <Marker position={[lat, lng]}>
                            <Popup>
                                {address}
                                <br />
                                <LineDot station={metro} /> {metro}
                            </Popup>
                        </Marker>
                    </MapContainer>
                </Modal.Body>

                <Modal.Footer>
                    <Button variant='success' onClick={handleBook}>
                        {bookStatus || "Забронировать"}
                    </Button>
                </Modal.Footer>
            </Modal.Dialog>
        </div>
    )
}

export default AnnouncementDetails