import { memo } from 'react'
import { Tag, Tooltip } from 'antd'

import { UserRoleDto } from '../../services/api'
import { Grid, GridItem } from '../Grid'
import PermissionView from './PermissionView'

export type RoleViewProps = {
    role?: UserRoleDto
    parentRole?: UserRoleDto
}

export const RoleView = memo<RoleViewProps>(({ role, parentRole }) => role ? (
    <Tooltip
        overlayInnerStyle={{ width: '400px' }}
        title={
            <Grid>
                <GridItem row={1} col={1}>Название:</GridItem>
                <GridItem row={1} col={2}>{role.caption}</GridItem>

                <GridItem row={2} col={1}>Роль-родитель:</GridItem>
                <GridItem row={2} col={2}>{parentRole?.caption ?? 'Отсутствует'}</GridItem>

                <GridItem row={3} col={1}>Тип:</GridItem>
                <GridItem row={3} col={2}>{role.idType}</GridItem>

                <GridItem row={4} col={1}>Разрешения:</GridItem>
                <GridItem row={5} col={1} colSpan={3}>
                    {role.permissions?.map((permission, i) => (
                        <Tag key={i} color={'blue'}>
                            <PermissionView info={permission} />
                        </Tag>
                    )) ?? '-'}
                </GridItem>
            </Grid>
        }
    >
        {role.caption}
    </Tooltip>
) : (
    <Tooltip title={'нет данных'}>-</Tooltip>
))