import React, {useState} 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";

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

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

    return (

        <div>
            {
                authorizations?.map(auth =>
                    <ListRow key={auth.id}>

                        <TextColumn large align={"left"} flex={'450px'}>
                            <b>{auth.agent.full_name}</b>
                        </TextColumn>

                        {
                            auth.microservices.map(ms =>
                                <TextColumn small align={"left"} flex={'auto'} key={ms.id}>
                                    <img src={checkmark} alt="" width={25} height={15}/>
                                    <b>{ms.view_name}</b>
                                </TextColumn>
                            )
                        }


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

        </div>

    );
}

export default AuthorizationsList;