import React from 'react'
import PropTypes from 'prop-types'
import { List, Typography, Flex } from 'antd'
import { getModelByName } from '../../../database/ObjectModels'
import IdDisplay from './IdDisplay'

const { Text } = Typography

const ObjectList = ({ value, objectType, bordered = true }) => {
  if (!value || !Array.isArray(value) || value.length === 0) {
    return <Text type='secondary'>n/a</Text>
  }
  return (
    <List
      size='small'
      bordered={bordered}
      dataSource={value}
      renderItem={(item) => {
        const model = getModelByName(objectType)
        const Icon = model.icon
        return (
          <List.Item>
            <Flex gap={'small'} align='center'>
              <Icon />
              {item?.name ? <Text ellipsis>{item.name}</Text> : null}
              {item?._id ? (
                <IdDisplay
                  id={item?._id}
                  longId={false}
                  type={objectType}
                  showHyperlink={true}
                />
              ) : null}
            </Flex>
          </List.Item>
        )
      }}
      style={{ width: '100%' }}
    />
  )
}

ObjectList.propTypes = {
  value: PropTypes.array,
  bordered: PropTypes.bool,
  objectType: PropTypes.string
}

export default ObjectList