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

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

const styles = {
    container: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    } as CSSProperties,
    map: {
        width: '100%',
        minHeight: 300,
    } as CSSProperties,
}

function AnnouncementDetails({ close, announcement: {
    id, name, category, bestBy, description, lat, lng, address, metro, bookedBy, userId
} }: AnnouncementDetailsProps) {
    const { handleBook, bookButton } = useBook()
    const { handleRemove, removeButton } = useRemoveAnnouncement(close)

    const myId = useId()

    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={styles.map} 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>
                    <p>Забронировали {bookedBy} чел.</p>
                    {(myId === userId) ? (
                        <Button variant='success' onClick={() => void handleRemove(id)} {...removeButton} />
                    ) : (
                        <Button variant='success' onClick={() => void handleBook(id)} {...bookButton} />
                    )}
                </Modal.Footer>
            </Modal.Dialog>
        </div>
    )
}

export default AnnouncementDetails