import { getMySubmissions } from "../../../../API/applio";
import useListControl from "../../../../hooks/useListControl";
import SearchBar from "../../../UI/SearchBar/SearchBar";
import SelectFiltersWrapper from "../../../UI/StatusFilter/SelectFiltersWrapper";
import SearchIcon from "../../../SVG/SearchIcon";
import List from './List/List';

        
const csvHeaders = [
    { label: "Τίτλος Πρόσκλησης", key: "call_title" },
    { label: "Τίτλος Υποβολής", key: "title" },
    { label: "Ημερομηνία Υποβολής", key: "submitted_at" },
];

const SubmissionsList = () => {

    const InitParams = () => {
    return {
        order: 'ASC',
        order_by: 'title',
        search: '',
        auth_type: 'dua',
        page_size: 10,
        page: 1,
        }
    }

    const [submissions, submissionsParams, setSubmissionsParams, updateSubmissions, _, exportList ] = useListControl<any, any>(InitParams(), getMySubmissions, csvHeaders);

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

    return ( 
        <div className="rescom-erga-container">
            <div className="erga-list-wrapper">
                <div className="search-wrapper row mb-3 gap-4">
                    <div className="col">
                        <SearchBar
                            onSearch={handleSearch}
                            value={submissionsParams.search}
                            placeholder={`Αναζητήστε με βάση τον Τίτλο Πρόσκλησης ή τον Τίτλο Υποβολής`}>
                            <div className='img-container'><SearchIcon/></div>
                            <div className='search-divider'></div>
                        </SearchBar>
                        <SelectFiltersWrapper>
                           <div className="spacer"></div>
                        </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>
                            {
                                submissions &&
                                <List
                                    orderParams={{
                                        'order': submissionsParams.order,
                                        'order_by': submissionsParams.order_by,
                                        'setOrder': (order_by: string, order: any) => {
                                            setSubmissionsParams({
                                                ...submissionsParams,
                                                order: order,
                                                order_by: order_by
                                            })
                                        }
                                    }}
                                    exportList={exportList}
                                    setPage={(p:any) => {
                                        setSubmissionsParams({
                                            ...submissionsParams,
                                            page: p
                                        })
                                    }}
                                    setPerPage={(p:any) => {
                                        setSubmissionsParams({
                                            ...submissionsParams,
                                            page: 1,
                                            page_size: p
                                        })
                                    }                  
                                    }
                                    submissions={submissions}
                                    updateSubmissions={updateSubmissions}
                                />
                            }
                        </div>
                </div>
            </div>
    )
}
export default SubmissionsList;