import { Tag, Flex, Typography } from 'antd'
import PropTypes from 'prop-types'
const { Text } = Typography
import { useEffect, useState } from 'react'
import ScrollBox from './ScrollBox'

const TagsDisplay = ({ tags, style, scrollHorizontal = false }) => {
  const [tagArray, setTagArray] = useState([])

  useEffect(() => {
    if (typeof tags === 'string') {
      setTagArray([tags])
    } else if (Array.isArray(tags)) {
      setTagArray(tags)
    }
  }, [tags])

  if (
    !tagArray ||
    tagArray.length === 0 ||
    (tagArray.length === 1 && !tagArray[0])
  ) {
    return <Text type='secondary'>n/a</Text>
  }

  const tagContents = (
    <Flex gap={'4px'} wrap={!scrollHorizontal} style={style} justify={'start'}>
      {tagArray.map((tag, index) => (
        <Tag key={index} color='blue' style={{ margin: 0 }}>
          {tag}
        </Tag>
      ))}
    </Flex>
  )

  if (scrollHorizontal) {
    return <ScrollBox horizontalBottomPadding={10}>{tagContents}</ScrollBox>
  } else {
    return tagContents
  }
}

TagsDisplay.propTypes = {
  tags: PropTypes.arrayOf(PropTypes.string),
  style: PropTypes.object,
  scrollHorizontal: PropTypes.bool
}

export default TagsDisplay
