import { Button, Form, Modal } from "react-bootstrap"

import { categoryNames } from "../assets/category"
import { metros } from '../assets/metro'

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

    const handleSubmit = (event) => {
        event.preventDefault();
        event.stopPropagation();

        const formData = new FormData(event.currentTarget)

        setFilter(prev => ({
            ...prev,
            category: formData.get("category") || null,
            metro: formData.get("metro") || null
        }))

        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>
                            {Array.from(categoryNames).map(
                                ([category, categoryName]) =>
                                    <option key={category} value={category}>{categoryName}</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>
                            {Object.entries(metros).map(
                                ([branch, stations]) =>
                                    stations.map(metro =>
                                        <option key={metro} value={metro}>{metro}</option>
                                    )
                            )}
                        </Form.Select>
                    </Form.Group>

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

export default Filters