import React from 'react'
import { Chip } from '@dhis2/ui-core'
import { DeleteButton } from './DeleteButton'
import './style.css'

export const AppComp = ({ roleId, appdata, rolesdata, refetch, onClick }) => {
    const name = appdata.displayName ? appdata.displayName : appdata.name

    let icon;
    if (typeof appdata.icon === 'string') {
        const imgsrc = appdata.icon.replace(
            '..',
            `${process.env.REACT_APP_DHIS2_BASE_URL}`
        )
        icon = <img src={imgsrc} alt={appdata.displayName} />
    } else {
        icon = appdata.icon
    }

    return (
        <Chip
            className="appchip"
            icon={icon}
            onClick={() => {
                onClick()
            }}
        >
            {name}
            {rolesdata && (
                <DeleteButton
                    roleId={roleId}
                    appname={appdata.name}
                    rolesdata={rolesdata}
                    refetch={refetch}
                />
            )}
        </Chip>
    )
}