import React from 'react';
import ListRow from "../../../UI/DuaList/ListRow";
import TextColumn from "../../../UI/DuaList/Columns/TextColumn";
import {LinkWithRole} from "../../../HOC/LinkWithRole";
import ListActions from "../../../UI/DuaList/Columns/ListActions";
import '../../../UI/Modal/ActionsModal/ActionsModal.scss';
import './List.scss';
import {EmailAccount} from "../../../../models/NetSupport/EmailAccount";
import StatusColumn from "../../../UI/DuaList/Columns/StatusColumn";
import {formatDate} from "../../../../helpers/functions";
import DuaList from '../../../UI/DuaList/DuaList';
import {RecordsResponse} from "../../../../models/Axios";

type EmailAccountsListProps = {
    emailAccounts: RecordsResponse<EmailAccount>
    updateEmailAccounts: () => void
    setPage: (n: number) => void
    setPerPage: (n: number) => void
}

const List = ({emailAccounts, setPage, setPerPage, updateEmailAccounts}: EmailAccountsListProps) => {



    return (
        <>
            {emailAccounts &&

                <DuaList
                    pagination={{
                        meta: emailAccounts.metadata,
                        setPage: setPage,
                        setPerPage: setPerPage
                    }}
                >
                    {
                        emailAccounts.records.map(acc => {
                            return (
                                <ListRow
                                    _key={acc.id ?? 0}
                                    key={acc.id ?? 0}
                                    status={acc.type?.ui_type}
                                    isActive={acc.type?.name !== 'inactive'}
                                >

                                    <StatusColumn
                                        label={'ΤΥΠΟΣ ACCOUNT'}
                                        align={'center'}
                                        flex={'0 0 140px'}
                                        type={acc.type?.ui_type}
                                        title={`Τύπος Account: `+acc.type?.view_name}
                                    >
                                        {acc.type?.view_name}
                                    </StatusColumn>

                                    <TextColumn
                                        label={'DEMOKRITOS EMAIL'}
                                        flex='1 0 140px'
                                        title={`Demokritos Email `+acc.username}
                                        align={'left'}>
                                        <b>{acc.username}</b>
                                    </TextColumn>
                                    <TextColumn
                                        label={'ΟΝΟΜΑΤΕΠΩΝΥΜΟ'}
                                        flex='1.5 0 180px'
                                        title={`Όνοματεπώνυμο: ${acc.lastname + " " + acc.firstname}`}
                                        align={'left'}>
                                        <b> {acc.lastname + " " + acc.firstname}</b>
                                    </TextColumn>

                                    <TextColumn
                                        label={'ΚΙΝΗΤΟ'}
                                        flex='0 0 90px'
                                        title={acc.mobile_phone!=="" ?`Κινητό: `+ acc.mobile_phone: "--"}
                                        align={'center'}>
                                        <b>{acc.mobile_phone!=="" ? acc.mobile_phone: "--"}</b>
                                    </TextColumn>

                                    <TextColumn
                                        label={'ΕΠΙΣΤΗΜΟΝΙΚΟΣ ΥΠΕΥΘΥΝΟΣ'}
                                        title={'Επιστημονικός Υπεύθυνος: ' + acc.scientific_supervisor_lastname + " " + acc.scientific_supervisor_firstname}
                                        flex={'1.5 0 180px'}>
                                        <b>{(acc.scientific_supervisor_lastname!=="" ?acc.scientific_supervisor_lastname: "--") + " " + (acc.scientific_supervisor_firstname!=="" ? acc.scientific_supervisor_firstname :"--")}</b>
                                    </TextColumn>

                                    <TextColumn
                                        label={'ΕΡΕΥΝΗΤ.ΟΜ./ΤΜΗΜΑ'}
                                        flex={'1 0 110px'}
                                       title={`Ερευνητ.ομ./τμήμα: ${acc.unit_category_id == 1 ? acc.department : acc.unit_category_id == 2 ? acc.research_group : ''}`}
                                        >
                                        {acc.unit_category_id ==1 && acc.department}
                                        {acc.unit_category_id ==2 && acc.research_group}
                                    </TextColumn>

                                    <TextColumn
                                        label={'ΔΗΜΙΟΥΡΓΗΘΗΚΕ'}
                                        title={'Δημιουργήθηκε: ' + formatDate(acc.created_at)}
                                        flex={'0.3 0 85px'}
                                        align={'center'}>
                                        {formatDate(acc.created_at)}
                                    </TextColumn>

                                    <ListActions>
                                        <ul>
                                            <LinkWithRole
                                                to={`view/${acc.id}`}
                                            >
                                                <li>Εμφάνιση</li>
                                            </LinkWithRole>
                                        </ul>
                                    </ListActions>
                                </ListRow>
                            )
                        })
                    }
                </DuaList>
            }

        </>
    )
        ;
}

export default List;