import React from 'react';
import ListRow from "../../../../UI/DuaList/ListRow";
import TextColumn from "../../../../UI/DuaList/Columns/TextColumn";
import ListActions from "../../../../UI/DuaList/Columns/ListActions";
import checkmark from '../../../../../assets/images/check-mark.svg';
import {Authorization} from "../../../../../models/Settings/Authorization";
import DuaList from "../../../../UI/DuaList/DuaList";

interface AuthorizationListProps {
    authorizations?: Authorization[]
    handleEdit: (auth: Authorization) => void
    handleDelete: (auth: Authorization) => void
}

const AuthorizationsList = ({handleDelete, handleEdit, authorizations}: AuthorizationListProps) => {

    return (
        <>
            {
                authorizations &&

                <DuaList>

                    {
                        authorizations.map(auth => {
                            return (
                                <ListRow
                                    _key={auth.id}
                                    key={auth.id}>

                                    <TextColumn
                                        label={'ONOMA ΕΞΟΥΣΙΟΔΟΤΗΜΕΝΟΥ'}
                                        size='14px'
                                        align={"left"}
                                        flex={'1.5 0 450px'}>
                                        <b>{auth.agent.full_name}</b>
                                    </TextColumn>

                                    <TextColumn size='11px' align={"left"} flex={'1 0 250px'} label={'ΥΠΗΡΕΣΙΕΣ'}>

                                        <div className={'d-flex'}>
                                            {
                                                auth.microservices.map(ms =>

                                                    <div key={ms.id} className={'pe-3'}>
                                                        <img src={checkmark} alt="" width={25} height={15}/>
                                                        <b>{ms.view_name}</b>
                                                    </div>
                                                )
                                            }
                                        </div>

                                    </TextColumn>
                                    <ListActions>
                                        <ul>
                                            <li onClick={() => handleEdit(auth)}>Επεξεργασία</li>
                                            <li onClick={() => handleDelete(auth)}>Διαγραφή</li>
                                        </ul>
                                    </ListActions>

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

export default AuthorizationsList;