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 StatusColumn from '../../../UI/DuaList/Columns/StatusColumn';

const List = ({calls}: any) => {

    return (
        <div>
            {
                calls &&
                <>
                <DuaList>                   
                    {
                        calls.map((call : any)=> {
                            return (
                                <ListRow
                                    isActive={true}
                                    status={call.is_active ? 'pending' : 'completed'}
                                    _key={call.id}
                                    key={call.id}
                                >
                                     <ListActions>
                                        {
                                            call.is_active && 
                                            <ul>
                                                <LinkWithRole to={`${call.hash_id}`}>
                                                    <li>Φόρμα Υποβολής</li>
                                                </LinkWithRole>   
                                            </ul>
                                        }
                                    </ListActions>
                                    <StatusColumn
                                        type={call.is_active ? 'pending' : 'completed'}
                                        title={call.is_active ? 'ΕΝΕΡΓΟ' : 'ΑΝΕΝΕΡΓΟ'}
                                        flex={'0 0 100px'}
                                        align={'center'}
                                        label={"ΚΑΤΑΣΤΑΣΗ CALL"}
                                    >
                                    {call.is_active ? 'ΕΝΕΡΓΟ' : 'ΑΝΕΝΕΡΓΟ'}
                                    </StatusColumn>                                                                          
                                    <TextColumn
                                        flex='0 0 600px'
                                        label={"ΤΙΤΛΟΣ ΠΡΟΣΚΛΗΣΗΣ"}
                                        title={call.title}
                                    >
                                        <div className={'full-name-container'}>
                                            <b className={'full-name'}>{call.title}</b>
                                        </div>
                                    </TextColumn>

                                    <TextColumn
                                        label={'ΑΡΙΘΜΟΣ ΥΠΟΒΟΛΩΝ'}
                                        flex={'0 0 200px'}
                                        title={call.proposals_count}
                                        align={'center'}
                                    >
                                        <b>{call.proposals_count}</b>
                                    </TextColumn>
                                    
                                      <TextColumn
                                        label={'ΕΧΩ ΥΠΟΒΑΛΛΕΙ'}
                                        flex={'0 0 200px'}
                                        title={call.proposals_exist}
                                        align={'center'}
                                    >
                                        <b>{call.hasOwnProperty('proposals_exists') ? 'ΝΑΙ' : 'ΟΧΙ'}</b>
                                    </TextColumn>

                                    <TextColumn
                                        label={'ΚΑΤΑΛΗΚΤΙΚΗ ΗΜΕΡΟΜΗΝΙΑ'}
                                        flex={'0 0 200px'}
                                        title={dayjs(call.end_date).format('DD.MM.YYYY')}
                                        align={'center'}
                                    >
                                        <b>{dayjs(call.end_date).format('DD.MM.YYYY')}</b>
                                    </TextColumn>
                                </ListRow>
                            )
                        })
                    }
                </DuaList>

    </>
            }


        </div>
    );
}

export default List;