import React, {useContext, useEffect, useState} from 'react';
import useSetBreadCrumbs from "../../../../context/useSetBreadcrumbs";
import {HrRequest, HrRequestParams, HrRequestType} from "../../../../models/HrSupport/HrRequest";
import useListControl from "../../../../hooks/useListControl";
import {getMyRequests, getRequestsForUserFolder, getRequestTypes} from "../../../../API/hr_support";
import SearchBar from "../../../UI/SearchBar/SearchBar";
import CustomRadioSelect from "../../../UI/Forms/CustomSelect/CustomRadioSelect";
import SelectItem from "../../../UI/Forms/CustomSelect/SelectItem";
import '../../../HrSupport/RequestsManagement/HrRequestsList/HrRequestsList.scss';
import HrRequestsFilters from "../../../HrSupport/RequestsManagement/HrRequestsList/HrRequestsFilters";
import RequestsList from "../../../HrSupport/RequestsManagement/HrRequestsList/RequestsList";
import {Order} from "../../../UI/DuaList/DuaList";
import EmployeeContext from "../employeeContext";


const InitParams = (): HrRequestParams => {
    return {
        order: "DESC",
        order_by: "request_date",
        list_type: '1',
        page: 1,
        page_size: 10,
        request_types: [],
        search: '',
    }
};

const Requests = () => {

    const {employee, scope} = useContext(EmployeeContext)
    useSetBreadCrumbs(2, 'Ενέργειες ')
    const [requests, requestsParams, setRequestsParams, fetchRequests] = useListControl<HrRequestParams, HrRequest>(InitParams(), (params) => scope === 'hr_manager' ? getRequestsForUserFolder(employee.user.id, params) : getMyRequests(params));
    const [requestTypes, setRequestTypes] = useState<HrRequestType[]>()

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

    const handleSelectChange = (value: string) => {
        setRequestsParams({
            ...requestsParams,
            list_type: value,
            page: 1,
        })
    }

    useEffect(() => {
        (async () => {
            const resp = await getRequestTypes()
            setRequestTypes(resp.data)
        })();
    }, [])

    return (

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

            <div className="search-wrapper row mb-5 gap-4">
                <div className="col">
                    <SearchBar
                        onSearch={handleSearch}
                        placeholder={`Αναζητήστε με βάση τον/την δημιουργό του αιτήματος (${requests?.metadata.total_count})`}
                        value={requestsParams.search ?? ''}
                    >
                        <CustomRadioSelect
                            theme={"search-listbox"}
                            value={requestsParams.list_type}
                            handleChange={(value) => handleSelectChange(value)}
                        >
                            <SelectItem value={'1'}>
                                <span>
                              Όλες οι Ενέργειες
                                </span>
                            </SelectItem>
                            <SelectItem value={'2'}>
                                <span>
                               Σε εξέλιξη
                                </span>
                            </SelectItem>
                            <SelectItem value={'3'}>
                                 <span>
                                Ολοκληρώθηκε
                                </span>
                            </SelectItem>
                            <SelectItem value={'4'}>
                                <span>
                                Ακυρώθηκε
                                </span>
                            </SelectItem>
                            <SelectItem value={'5'}>
                                <span>
                                Σφάλμα
                                </span>
                            </SelectItem>
                            <SelectItem value={'6'}>
                                <span>
                                Κάρτα έτοιμη
                                </span>
                            </SelectItem>
                        </CustomRadioSelect>
                    </SearchBar>

                </div>

            </div>


            <div className="d-flex mb-5">
                {((requests && requests.records.length !== 0) || (requests && requests.records.length == undefined)) &&
                    <HrRequestsFilters
                        counters={requests && requests.counters}
                        request_types={requestTypes}
                        selectedRequestTypes={requestsParams.request_types}
                        setFilteredTypes={(newTypes) => setRequestsParams({
                            ...requestsParams,
                            page: 1,
                            request_types: newTypes
                        })}
                    />}


            </div>


            <div className={'mb-5'}>
                {
                    requests &&
                    <RequestsList
                        orderParams={{
                            'order': requestsParams.order,
                            'order_by': requestsParams.order_by,
                            'setOrder': (order_by: string, order: Order) => {
                                setRequestsParams({
                                    ...requestsParams,
                                    order: order,
                                    order_by: order_by
                                })
                            }
                        }}
                        pagination={{
                            meta: requests.metadata,
                            setPage: (p: number) => {
                                setRequestsParams({
                                    ...requestsParams,
                                    page: p
                                })
                            },
                            setPerPage: (p: number) => {
                                setRequestsParams({
                                    ...requestsParams,
                                    page: 1,
                                    page_size: p
                                })
                            },
                            lastFetched: requests?.last_fetched
                        }}
                        requests={requests}
                        updateRequests={fetchRequests}

                    />
                }
            </div>

        </div>
    );
}

export default Requests;