import PropTypes from 'prop-types'
import ObjectDisplay from './ObjectDisplay'
import { Flex, Typography } from 'antd'
import ScrollBox from './ScrollBox'

const { Text } = Typography

const ObjectList = ({
  value,
  objectType,
  style,
  showHyperlink = false,
  scrollHorizontal = false
}) => {
  if (!value || !Array.isArray(value) || value.length === 0) {
    return <Text type='secondary'>n/a</Text>
  }

  const listContents = (
    <Flex
      gap={'4px'}
      wrap={!scrollHorizontal}
      style={{
        ...style,
        width: 'fit-content'
      }}
      justify={'start'}
    >
      {value.map((item) => (
        <div key={item._id} style={{ flexShrink: 0 }}>
          <ObjectDisplay
            object={item}
            objectType={objectType}
            showHyperlink={showHyperlink}
          />
        </div>
      ))}
    </Flex>
  )

  if (scrollHorizontal) {
    return (
      <ScrollBox horizontalBottomPadding={9}>
        {listContents}
      </ScrollBox>
    )
  } else {
    return listContents
  }
}

ObjectList.propTypes = {
  value: PropTypes.array,
  objectType: PropTypes.string,
  style: PropTypes.object,
  showHyperlink: PropTypes.bool,
  scrollHorizontal: PropTypes.bool
}

export default ObjectList