import useLoading from "../../../../hooks/useLoading";
import ReactDOM from "react-dom";
import { getSubmissionPrograms} from "../../../../API/applio";
import { GetSubmissionProgramsList } from "../../../../models/Applio/Program";
import useListControl from "../../../../hooks/useListControl";
import MakeCustomRadioSelect from "../../../UI/Forms/CustomSelect/MakeCustomRadioSelect";
import SearchBar from "../../../UI/SearchBar/SearchBar";
import SelectFiltersWrapper from "../../../UI/StatusFilter/SelectFiltersWrapper";
import DuaLoader from "../../../UI/Loader/DuaLoader/DuaLoader";
import SearchIcon from "../../../SVG/SearchIcon";
import List from "./List/List";

const csvHeaders = [
    { label: "Τίτλος Προγράμματος", key: "view_name_el" },
    { label: "Φορέας Υποβολής", key: "implementation_entity.view_name_el" },
    { label: "Διάρκεια Προγράμματος", key: "end_date" },
    { label: "Αριθμός Calls", key: "calls_count" },
];
        
const ProgramsList = () => {
const [isLoading, setIsLoading] = useLoading(true);
    
const InitParams = () => {
        return {
            order: 'ASC',
            order_by: 'name',
            search: '',
            implementation_entity_id: -1,
            is_active: -1,
            page_size: 10,
            page: 1,
        }
    }

const [programs, programsParams, setProgramsParams, updatePrograms, _, exportList ] = useListControl<any, GetSubmissionProgramsList>(InitParams(), getSubmissionPrograms, csvHeaders);

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

    return ( 
        <div className="rescom-erga-container">
                {
                    isLoading &&
                    ReactDOM.createPortal(
                        <div className="dua-loader-portal">
                            <DuaLoader/>
                        </div>,
                        document.body
                    )
                }
            <div className="erga-list-wrapper">
                <div className="search-wrapper row mb-3 gap-4">
                    <div className="col">
                        <SearchBar
                            onSearch={handleSearch}
                            value={programsParams.search}
                            placeholder={`Αναζητήστε με βάση τον Τίτλο Προγράμματος`}>
                            <div className='img-container'><SearchIcon/></div>
                            <div className='search-divider'></div>
                        </SearchBar>
                        <SelectFiltersWrapper>
                            <MakeCustomRadioSelect
                                theme="search-listbox-blue"
                                placeholder="Επιλέξτε Κατάσταση Προγράμματος"
                                value={programsParams.is_active}
                                handleChange={(v) =>
                                        setProgramsParams({...programsParams, page: 1, is_active: v})
                                }
                                options={programs?.lookups.status ?? []}
                            />
                            <MakeCustomRadioSelect
                                theme="search-listbox-blue"
                                placeholder="Επιλέξτε Φορέα Υλοποίησης"
                                value={programsParams.implementation_entity_id}
                                handleChange={(v) =>
                                        setProgramsParams({...programsParams, page: 1, implementation_entity_id: v})
                                }
                                options={programs?.lookups.implementation_entities ?? []}
                            />
                        </SelectFiltersWrapper>
                    </div>
                </div>
                <div className='employees-list-wrapper'>
                    <div className="position-relative d-flex gap-lg-0 mb-5 align-items-lg-center justify-content-lg-between flex-lg-row flex-column align-items-start justify-content-around gap-3">
                        </div>
                            {
                                programs &&
                                <List
                                    orderParams={{
                                        'order': programsParams.order,
                                        'order_by': programsParams.order_by,
                                        'setOrder': (order_by: string, order: any) => {
                                            setProgramsParams({
                                                ...programsParams,
                                                order: order,
                                                order_by: order_by
                                            })
                                        }
                                    }}
                                    exportList={exportList}
                                    setPage={(p:any) => {
                                        setProgramsParams({
                                            ...programsParams,
                                            page: p
                                        })
                                    }}
                                    setPerPage={(p:any) => {
                                        setProgramsParams({
                                            ...programsParams,
                                            page: 1,
                                            page_size: p
                                        })
                                    }                  
                                    }
                                    programs={programs}
                                    updatePrograms={updatePrograms}
                                />
                            }
                        </div>
                </div>
            </div>
    )
}
export default ProgramsList;