import React, {useEffect, useState} from 'react';
import * as rescomApi from '../../../../API/rescom';
import {useParams} from "react-router-dom";
import DynamicList from "../../../UI/DynamicList/DynamicList";
import Pagination from "../../../UI/Pagination/Pagination";
import './rescomsymvaseisergou.scss';
import {RecordsResponse} from "../../../../models/Axios";
import {RescomProject} from "../../../../models/Rescom/RescomErga";
import {RescomContract} from "../../../../models/Rescom/RescomContracts";

interface RescomSymvaseisErgouParams {
	page: number
	project_id: string | undefined
	page_size?: number
}
const listInstructions = [
    {
        key: 'Ονοματεπώνυμο',
        class: 'name-surname',
        type: 'text',
        title: 'Ονοματεπώνυμο'
    },
    {
        key: 'Τύπος_Σύμβασης',
        class: 'category',
        type: 'text',
        title: 'Κατηγορία Σύμβασης'
    },
    {
        key: 'Διάρκεια_Σύμβασης',
        class: 'duration',
        type: 'text',
        title: 'Διάρκεια'
    },
    {
        key: 'Κόστος_Συμβάσεων',
        class: 'cost',
        type: 'secret',
        title: 'Κόστος'
    },
    {
        key: 'Βαθμίδα_Εκπαίδευσης',
        class: 'tier',
        type: 'text',
        title: 'Βαθμίδα Εκπαίδευσης'
    },

]

const RescomSymvaseisErgou = () => {

    const params = useParams();
    const [symvaseisErgouOptions, setSymvaseisErgouOptions] = useState<RescomSymvaseisErgouParams>({page: 1, project_id: params.ergo});
    const [symvaseisErgou, setSynmvaseisErgou] = useState<RecordsResponse<RescomContract> | null>(null);

    const getSymvaseisErgou = async () => {
        const res = await rescomApi.getRescomSymvaseisErgou(symvaseisErgouOptions)
        setSynmvaseisErgou(res.data)
    }

    useEffect(() => {

        getSymvaseisErgou()
    }, [symvaseisErgouOptions])

    return (

        <div className="symvaseis-ergou-list-wrapper">
                <DynamicList
                    instructions={listInstructions}
                    listData={symvaseisErgou &&symvaseisErgou.records}
                    pagination={{
                        pageSize:10,
                        currentPage:symvaseisErgou ? symvaseisErgou.metadata.page : 1
                    }}
                />

                {
                    symvaseisErgou &&

                    <div className="pagination-container d-flex justify-content-end">
                        <Pagination
                            currentPage={symvaseisErgou.metadata.page}
                            totalPages={symvaseisErgou.metadata.page_count}
                            setPage={(p)=>{
                                setSymvaseisErgouOptions({
                                    ...symvaseisErgouOptions,
                                    page:p
                                })
                            }
                            }
                        />
                    </div>
                }
            </div>
    )
}

export default RescomSymvaseisErgou;