import React, {useEffect, useState} from 'react';
import {useTranslation} from "react-i18next";
import MultiSelect from "../../../input/MultiSelect";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faTrashAlt} from "@fortawesome/free-regular-svg-icons";
import {Col, Row} from "react-bootstrap";

const MultipleChoiceFilter = ({index, label, filter, removeFilter, setFilterOptions}) => {
    const {t} = useTranslation();
    const select = index === 0 ? t('html.query.filter.generic.start') : t('html.query.filter.generic.and');

    const parameterSelected = filter.parameters?.selected
        ? JSON.parse(filter.parameters.selected)
            .map(option => filter.options.options.indexOf(option))
        : undefined;

    const [selectedIndexes, setSelectedIndexes] = useState(parameterSelected || []);
    useEffect(() => {
        setFilterOptions({
            ...filter,
            parameters: {
                selected: JSON.stringify(selectedIndexes.map(index => filter.options.options[index]))
            }
        })
    }, [setFilterOptions, selectedIndexes, filter]);

    return (
        <div id={'filter-' + index} className="mt-2">
            <label className="form-label" htmlFor={'filter-' + index}>{select}{t(label)}:</label>
            <Row>
                <Col md={11} className={"flex-fill"}>
                    <MultiSelect options={filter.options.options}
                                 setSelectedIndexes={setSelectedIndexes}
                                 selectedIndexes={selectedIndexes}/>
                </Col>
                <Col md={"auto"}>
                    <button className="filter-remover btn btn-outline-secondary float-end"
                            onClick={removeFilter}><FontAwesomeIcon icon={faTrashAlt}/>
                    </button>
                </Col>
            </Row>
        </div>
    )
};

export default MultipleChoiceFilter