import React, {useEffect, useState} from 'react';
import {Status} from "../../../models/DPass/Invitation";
import StatusFilter from "./StatusFilter";
import {forceUppercaseGreek} from "../../../helpers/functions";
import {toastError} from "../../../services/toaster";
import {AxiosResponse} from "axios";

type ListStatusFiltersProps = {
    counters: any
    selectedStatuses: string[]
    setFilteredStatuses: (s: string[]) => void
    fetchStatuses: () =>  Promise<AxiosResponse<any, any>>
    filteredKey?: 'id' | 'name' | 'view_name_el'
}


const ListStatusFilters = ({
                               counters,
                               selectedStatuses,
                               setFilteredStatuses,
                               fetchStatuses,
                               filteredKey = 'name'
                           }: ListStatusFiltersProps) => {

    const [statuses, setStatuses] = useState<any>()

    useEffect(() => {

        (async () => {
            try {
                const status_res = await fetchStatuses()
                setStatuses(status_res.data)
            } catch (e) {
                toastError('Φαίνεται ότι η ενέργεια δεν ολοκληρώθηκε. Παρακαλούμε προσπαθήστε ξανά.')
            }
        })();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    const toggleStatus = (key: string) => {

        const newFilteredStatuses = [...selectedStatuses];

        key.split(',').forEach(iid=>{

            const index = newFilteredStatuses.indexOf(iid);

            if (index >= 0) {
                newFilteredStatuses.splice(index, 1)
            } else {
                newFilteredStatuses.push(iid)

            }
        })
        setFilteredStatuses(newFilteredStatuses)

    }


    return (
        <div className={'d-flex gap-3 flex-wrap'}>

            {
                statuses && statuses.map((status: Status) => {

                    return status.name !== 'pending' && (

                        <StatusFilter
                            key={status.id ?? status.name}
                            count={(counters && status[filteredKey] in counters ) ? counters[status[filteredKey]] : -1}
                            type={status.ui_type ?? status.type ?? 'pending'}
                            selected={status[filteredKey].toString().split(',').every(id=>selectedStatuses.includes(id))}
                            onClick={() => toggleStatus(status[filteredKey].toString())}
                        >
                            {forceUppercaseGreek(status?.view_name ?? status?.view_name_el)}
                        </StatusFilter>


                    )
                })
            }
        </div>
    );
}

export default ListStatusFilters;