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'
import { Announcement } from '../api/announcement/types'
import { iconItem } from '../utils/markerIcons'
import { CSSProperties } from 'react'

type AnnouncementDetailsProps = {
    close: () => void,
    announcement: Announcement
}

const styles = {
    container: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    } as CSSProperties,
}

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

    return (
        <div
            className='modal'
            style={styles.container}
        >
            <Modal.Dialog style={{ minWidth: '50vw' }}>
                <Modal.Header closeButton onHide={close}>
                    <Modal.Title>
                        Подробнее
                    </Modal.Title>
                </Modal.Header>

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

                    <span>{categoryNames[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 icon={iconItem} position={[lat, lng]}>
                            <Popup>
                                {address}
                                <br />
                                <LineDot station={metro} /> {metro}
                            </Popup>
                        </Marker>
                    </MapContainer>
                </Modal.Body>

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

export default AnnouncementDetails