import React, { useEffect, useRef } from 'react';
import { useSearchParams } from 'react-router-dom';
import SearchBar from "../../../UI/SearchBar/SearchBar";
import SelectFiltersWrapper from "../../../UI/StatusFilter/SelectFiltersWrapper";
import SearchIcon from "../../../SVG/SearchIcon";
import useListControl from "../../../../hooks/useListControl";
import useLoading from "../../../../hooks/useLoading";
import { getRescomContracts } from "../../../../API/rescom";
import { GetRescomContractsParams, RescomContract } from "../../../../models/Rescom/RescomContracts";
import useRole from "../../../../hooks/useRole";
import {WithRuleBoolean} from "../../../HOC/WithRule";
import FloatingWidget from "../../../Widgets/FloatingWidget/FloatingWidget";
import folder from "../../../../assets/images/apps-add.svg";
import ContractListNav from "../../../Widgets/ContractNav/ContractListNav";
import useSetBreadCrumbs from "../../../../context/useSetBreadcrumbs";

const ContractsFiles = () => {
    const [searchParams] = useSearchParams();
    const activeRole = useRole();
    useSetBreadCrumbs(3, 'Αρχεία Συμβάσεων')
    // -----------------------------
    // Initial API Params
    // -----------------------------
    // const InitParams = (): GetRescomContractsParams => ({
    //     order: "DESC",
    //     order_by: "contract_end_date",
    //     page: 1,
    //     page_size: 10,
    //     search: "",
    //     role:activeRole,
    //     project_code: searchParams.get('project_code') ?? ''
    // });

    // const csvHeaders = [
    //     { label: "ΤΥΠΟΣ ΣΥΜΒΑΣΗΣ", key: "contract_type" },
    //
    // ];


    // const [contracts, contractsParams, setContractsParams, fetchContracts, _, exportList] =
    //     useListControl<GetRescomContractsParams, RescomContract>(InitParams(), getRescomContracts, csvHeaders);
    // const [isLoading, setIsLoading] = useLoading(true);
    // const reqIdRef = useRef(0);

    // -----------------------------
    // Merge URL params once
    // -----------------------------


    // -----------------------------
    // Load filters based on role
    // -----------------------------
    // useEffect(() => {
    //     if (!activeRole) return;
    //
    //     let cancelled = false;
    //     const myReqId = ++reqIdRef.current;
    //
    //     return () => { cancelled = true; };
    // }, [activeRole]);


    // -----------------------------
    // Handlers
    // -----------------------------
    // const handleSearch = (s: string) => {
    //     setContractsParams(prev => ({ ...prev, page: 1, search: s }));
    // };




    return (
        <div id="Contracts">
                <>
                    <FloatingWidget
                        // forceClose={forceClose}
                        title={'ΤΙΤΛΟΣ'}
                        icon={folder}
                    >
                        <ContractListNav/>
                    </FloatingWidget>
                    <div className="search-wrapper row gap-4">
                        <div className="col">
                            {/*<SearchBar*/}
                            {/*    onSearch={handleSearch}*/}
                            {/*    value={contractsParams.search}*/}
                            {/*    placeholder={`Αναζητήστε με βάση το όνομα, κωδικό, επιστημονικό υπεύθυνο της σύμβασης (${contracts?.metadata.total_count ?? 0})`}*/}
                            {/*>*/}
                            {/*    <div className="img-container"><SearchIcon /></div>*/}
                            {/*    <div className="search-divider"></div>*/}
                            {/*</SearchBar>*/}

                        </div>


                    </div>

                    <div
                        // style={contracts?.records.length ? { width: "calc(100% - 160px)" } : undefined}
                        className="d-flex justify-content-between align-items-baseline"
                    >
                        <SelectFiltersWrapper>

                        </SelectFiltersWrapper>


                    </div>

                    <div className="contracts-list-wrapper">

                            <>
                                lista files
                                {/*<List*/}
                                {/*    orderParams={{*/}
                                {/*        order: contractsParams.order,*/}
                                {/*        order_by: contractsParams.order_by,*/}
                                {/*        setOrder: (order_by: string, order: Order) =>*/}
                                {/*            setContractsParams({ ...contractsParams, order, order_by }),*/}
                                {/*    }}*/}
                                {/*    updateContracts={fetchContracts}*/}
                                {/*    exportList={exportList}*/}
                                {/*    setPage={p => handleFilterChange('page', p)}*/}
                                {/*    setPerPage={p => handleFilterChange('page_size', p)}*/}
                                {/*    contracts={contracts}*/}
                                {/*/>*/}
                            </>

                    </div>
                </>
            {/*)}*/}
        </div>
    );
};

export default ContractsFiles;