import { Flex, Typography, Badge } from 'antd'
import PropTypes from 'prop-types'

import FilamentStockIcon from '../../Icons/FilamentStockIcon'
import IdDisplay from './IdDisplay'

const { Text } = Typography

const FilamentStockDisplay = ({
  filamentStock,
  longId = false,
  showIcon = true,
  showColor = true,
  showId = true,
  showCopy = true
}) => {
  FilamentStockDisplay.propTypes = {
    filamentStock: PropTypes.shape({
      _id: PropTypes.string.isRequired,
      filament: PropTypes.shape({
        name: PropTypes.string,
        color: PropTypes.string
      }),
      currentNetWeight: PropTypes.number
    }).isRequired,
    longId: PropTypes.bool,
    showIcon: PropTypes.bool,
    showColor: PropTypes.bool,
    showId: PropTypes.bool,
    showCopy: PropTypes.bool
  }

  return (
    <Flex gap={'small'} align='center'>
      {showIcon && <FilamentStockIcon />}
      {showColor && <Badge color={filamentStock.filament.color} />}
      <Text>{`${filamentStock.filament?.name} (${filamentStock.currentNetWeight}g)`}</Text>
      {showId && (
        <IdDisplay
          id={filamentStock._id}
          longId={longId}
          type={'filamentstock'}
          showCopy={showCopy}
        />
      )}
    </Flex>
  )
}

export default FilamentStockDisplay