import { Icon, Link } from '@linagora/twake-icons'
import PropTypes from 'prop-types'
import React from 'react'

import Avatar from 'cozy-ui/transpiled/react/Avatar'
import ListItem from 'cozy-ui/transpiled/react/ListItem'
import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
import Typography from 'cozy-ui/transpiled/react/Typography'
import { useI18n } from 'twake-i18n'

import { checkIsReadOnlyPermissions } from '../../helpers/permissions'
import withLocales from '../../hoc/withLocales'

const LinkRecipientLite = ({ permissions, link }) => {
  const { t } = useI18n()

  if (!link) return null

  const isReadOnlyPermissions = checkIsReadOnlyPermissions(permissions)

  return (
    <ListItem size="small" ellipsis>
      <ListItemIcon>
        <Avatar size="m" color="none" border innerBorder>
          <Icon icon={Link} />
        </Avatar>
      </ListItemIcon>
      <ListItemText
        primary={t('Share.recipients.anyoneWithTheLink')}
        secondary={link}
      />
      <Typography className="u-flex-shrink-0" variant="body2">
        {t(`Share.type.${isReadOnlyPermissions ? 'one-way' : 'two-way'}`)}
      </Typography>
    </ListItem>
  )
}

LinkRecipientLite.propTypes = {
  permissions: PropTypes.array,
  link: PropTypes.string
}

export default withLocales(LinkRecipientLite)