import { Button, Form, Modal } from 'react-bootstrap'
import { FormEventHandler } from 'react'

import { categories, categoryNames } from '../assets/category'
import { stations, lines, lineNames } from '../assets/metro'
import { FiltersType } from '../utils/filters'
import { SetState } from '../utils/types'

type FiltersProps = {
    filter: FiltersType,
    setFilter: SetState<FiltersType>,
    filterShown: boolean,
    setFilterShown: SetState<boolean>
}

function Filters({ filter, setFilter, filterShown, setFilterShown }: FiltersProps) {

    const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
        event.preventDefault();
        event.stopPropagation();

        const formData = new FormData(event.currentTarget)

        setFilter(prev => ({
            ...prev,
            category: (formData.get('category') as (FiltersType['category'] | null)) || undefined,
            metro: (formData.get('metro') as (FiltersType['metro'] | null)) || undefined
        }))

        setFilterShown(false)
    }

    return (
        <Modal show={filterShown} onHide={() => setFilterShown(false)} centered>
            <Modal.Header closeButton>
                <Modal.Title>
                    Фильтрация
                </Modal.Title>
            </Modal.Header>

            <Modal.Body>
                <Form onSubmit={handleSubmit}>
                    <Form.Group className='mb-3' controlId='categoryFilter'>
                        <Form.Label>
                            Категория
                        </Form.Label>

                        <Form.Select name='category' defaultValue={filter.category || undefined}>
                            <option value=''>
                                Выберите категорию
                            </option>
                            {categories.map(
                                category =>
                                    <option key={category} value={category}>{categoryNames[category]}</option>
                            )}
                        </Form.Select>
                    </Form.Group>

                    <Form.Group className='mb-3' controlId='metroFilter'>
                        <Form.Label>
                            Станция метро
                        </Form.Label>

                        <Form.Select name='metro' defaultValue={filter.metro || undefined}>
                            <option value=''>
                                Выберите станцию метро
                            </option>
                            {lines.map(
                                line =>
                                    <optgroup key={line} label={lineNames[line]}>
                                        {Array.from(stations[line]).map(metro =>
                                            <option key={metro} value={metro}>{metro}</option>
                                        )}
                                    </optgroup>
                            )}
                        </Form.Select>
                    </Form.Group>

                    <Button variant='success' type='submit'>
                        Отправить
                    </Button>
                </Form>
            </Modal.Body>
        </Modal>
    )
}

export default Filters
