import React, {useEffect, useState} from 'react';

import {CardRequest} from "../../../../models/DPass/CardRequest";
import {
    /* eslint-disable @typescript-eslint/no-unused-vars */
    getMyInvitations,
    getRequests,
    GetRequestsParams,
    getRequestStatuses,
    getRequestTypes
} from "../../../../API/dpass";
import SearchBar from "../../../UI/SearchBar/SearchBar";
import List from "./List";
import ListStatusFilters from "../../../UI/StatusFilter/ListStatusFilters";
import './RequestsList.scss';

import {Order} from "../../../UI/DuaList/ListHeader/ListHead";
import {CustomSelectOptions} from "../../../../models/ReactComponents";
import MakeCustomRadioSelect from "../../../UI/Forms/CustomSelect/MakeCustomRadioSelect";
import useListControl from "../../../../hooks/useListControl";

const InitParams = (): GetRequestsParams => {
    return {
        order: 'DESC',
        order_by: 'created_at',
        type_id: [],
        page: 1,
        page_size: 10, search: '',
        status_id: 0,
    }
};
const RequestsList = () => {

    const [statuses, setStatuses] = useState<CustomSelectOptions>()
    const [requests, requestsParams, setRequestsParams, updateRequests] = useListControl<GetRequestsParams, CardRequest>(InitParams(), getRequests)



    const handleSearch = (s: string) => {
        setRequestsParams({
            ...requestsParams,
            page: 1,
            search: s,
            type_id: [],
        })
    };

    const handleSelectChange = (value: string) => {
        setRequestsParams({
            ...requestsParams,
            status_id: Number(value),
            page: 1,
            type_id: []
        })

    }

    useEffect(() => {
        (async () => {
            const resp = await getRequestStatuses()
            setStatuses(resp.data)
        })();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])



    return (
        <div className={'requests-list'}>

            <div className="search-wrapper row mb-3 gap-4">
                <div className="col">
                    <SearchBar
                        onSearch={handleSearch}
                        placeholder={`Αναζητήστε στις ενέργειες καρτών, με βάση το όνομα, το επώνυμο ή τον Επ. Υπεύθυνο (${requests?.metadata.total_count})`}
                        value={requestsParams.search ?? ''}
                    >
                        <MakeCustomRadioSelect
                            theme={"search-listbox"}
                            value={Number(requestsParams.status_id)}
                            handleChange={(value) => handleSelectChange(value)}
                            options={statuses ?? []}
                        />


                    </SearchBar>

                </div>

            </div>


            <div className="d-flex mb-5">
                {/* eslint-disable-next-line eqeqeq */}
                {((requests && requests.records.length !== 0) || (requests && requests.records.length == undefined)) &&
                    <ListStatusFilters
                        filteredKey={'name'}
                        counters={requests && requests.counters}
                        fetchStatuses={getRequestTypes}
                        selectedStatuses={requestsParams.type_id}
                        setFilteredStatuses={(newStatuses) => setRequestsParams({
                            ...requestsParams,
                            page: 1,
                            type_id: newStatuses
                        })}
                    />}
            </div>


            <div className={'mb-5'}>
                {
                    requests &&
                    <List
                        setPage={(p) => {
                            setRequestsParams({
                                ...requestsParams,
                                page: p
                            })
                        }}
                        setPerPage={(p) => {
                            setRequestsParams({
                                ...requestsParams,
                                page: 1,
                                page_size: p
                            })
                        }}
                        orderParams={{
                            'order': requestsParams.order,
                            'order_by': requestsParams.order_by,
                            'setOrder': (order_by: string, order: Order) => {
                                setRequestsParams({
                                    ...requestsParams,
                                    order: order,
                                    order_by: order_by
                                })
                            }
                        }}
                        requests={requests}
                        updateRequests={updateRequests}
                    />
                }
            </div>
        </div>
    );
}

export default RequestsList;