import React from 'react'
import PropTypes from 'prop-types'
import { Space, Tag } from 'antd'
import QuestionCircleIcon from '../../Icons/QuestionCircleIcon'
import PlusIcon from '../../Icons/PlusIcon'
import BinIcon from '../../Icons/BinIcon'
import EditIcon from '../../Icons/EditIcon'

const OperationDisplay = ({
  operation,
  showIcon = true,
  showText = true,
  showColor = true
}) => {
  var tagText = 'False'
  var tagIcon = <QuestionCircleIcon />
  var tagColor = 'default'
  switch (operation) {
    case 'new':
      tagText = 'New'
      tagIcon = <PlusIcon />
      tagColor = 'success'
      break
    case 'delete':
      tagText = 'Delete'
      tagIcon = <BinIcon />
      tagColor = 'error'
      break
    case 'edit':
      tagText = 'Edit'
      tagIcon = <EditIcon />
      tagColor = 'blue'
      break
    default:
      break
  }
  return (
    <Space>
      <Tag
        style={{ margin: 0 }}
        color={showColor ? tagColor : 'default'}
        icon={showIcon ? tagIcon : undefined}
      >
        {showText ? tagText : null}
      </Tag>
    </Space>
  )
}

OperationDisplay.propTypes = {
  operation: PropTypes.bool.isRequired,
  showIcon: PropTypes.bool,
  showText: PropTypes.bool,
  showColor: PropTypes.bool
}

export default OperationDisplay