import dayjs from 'dayjs';
import {LinkWithRole} from "../../../../HOC/LinkWithRole";
import ListRow from "../../../../UI/DuaList/ListRow";
import TextColumn from "../../../../UI/DuaList/Columns/TextColumn";
import DuaList from "../../../../UI/DuaList/DuaList";
import ListActions from "../../../../UI/DuaList/Columns/ListActions";
import {Order} from "../../../../UI/DuaList/ListHeader/ListHead";
import StatusColumn from '../../../../UI/DuaList/Columns/StatusColumn';
import './List.scss';


type ProgramsListProps = {
    programs: any
    setPage: (n: number) => void
    setPerPage: (n: number) => void
    exportList?: any
    orderParams: { order: Order, order_by: string, setOrder: (order_by: string, order: Order) => void }
    updatePrograms: () => void
}
const List = ({programs, orderParams, exportList, setPage, setPerPage, updatePrograms}: ProgramsListProps) => {
    return (
        <div>
            {
                programs &&
                <>
                <DuaList
                    orderParams={orderParams}
                    exportList={exportList}
                    pagination={{
                        meta: programs.metadata,
                        setPage: setPage,
                        setPerPage: setPerPage,
                    }}
                >
                    {
                        programs.records.map((program : any)=> {
                            return (
                                <ListRow
                                    status={`${program.ui_info.type}`}
                                    isActive={true}
                                    _key={program.id}
                                    key={program.id}
                                >
                                     <ListActions>
                                        <ul>
                                            <LinkWithRole to={`view/${program.hash_id}`}>
                                                <li>Επισκόπηση Προγράμματος</li>
                                            </LinkWithRole>
                                            {
                                                program.ui_info.value === 'ΕΝΕΡΓΟ' && program.ui_info.has_active_call === true &&
                                                <LinkWithRole to={`view/${program.hash_id}/${program.ui_info.active_call_id}`}>
                                                    <li>Φόρμα Υποβολής</li>
                                                </LinkWithRole>
                                            }
                                        </ul>
                                    </ListActions>
                                    <StatusColumn
                                        type={program.ui_info.type}
                                        title={program.ui_info.value}
                                        flex={'0 0 100px'}
                                        align={'center'}
                                        label={"ΚΑΤΑΣΤΑΣΗ"}
                                    >
                                    {program.ui_info.value}
                                    </StatusColumn>
                                    <TextColumn
                                        flex='0 1 600px'
                                        label={"ΤΙΤΛΟΣ ΠΡΟΓΡΑΜΜΑΤΟΣ"}
                                        title={program.view_name_el}
                                        orderable={'view_name_el'}
                                    >
                                        <div className={'full-name-container'}>
                                            <b className={'full-name'}>{program.view_name_el}</b>
                                        </div>
                                    </TextColumn>
                                    <TextColumn
                                        flex='0 1 400px'
                                        label={"ΦΟΡΕΑΣ ΥΠΟΒΟΛΗΣ"}
                                        title={program.implementation_entity.view_name_el}
                                        >
                                        <div className={'full-name-container'}>
                                            <b className={'full-name'}>{program.implementation_entity.view_name_el}</b>
                                        </div>
                                    </TextColumn>
                                    <TextColumn
                                        flex='0 1 250px'
                                        label={"ΔΙAΡΚΕΙΑ ΠΡΟΓΡAΜΜΑΤΟΣ"}
                                        title={`${program.duration}`}
                                        align={'center'}
                                        >
                                        <div className={'full-name-container'}>
                                            <b className={'full-name'}>{`${dayjs(program.start_date).format('DD.MM.YYYY')} - ${dayjs(program.end_date).format('DD.MM.YYYY')}`}</b>
                                        </div>
                                    </TextColumn>
                                    <TextColumn
                                        label={'ΑΡΙΘΜΟΣ CALLS'}
                                        flex={'0 0 100px'}
                                        title={program.calls_count}
                                        align={'center'}
                                    >
                                        <b>{program.calls_count}</b>
                                    </TextColumn>

                                </ListRow>
                            )
                        })
                    }
                </DuaList>
    </>
            }


        </div>
    );
}

export default List;