// PartSelect.js
import React from 'react'
import PropTypes from 'prop-types'
import { Badge } from 'antd'
import config from '../../../config'
import ObjectSelect from './ObjectSelect'

const propertyOrder = ['diameter', 'type', 'brand']

const PartSelect = ({ onChange, filter, useFilter }) => {
  return (
    <ObjectSelect
      endpoint={`${config.backendUrl}/parts`}
      propertyOrder={propertyOrder}
      getTitle={(item, isLeaf) =>
        isLeaf ? <Badge color={item.color} text={item.name} /> : item
      }
      getValue={(item, isLeaf) => (isLeaf ? item._id : item)}
      getKey={(item, isLeaf) => (isLeaf ? item._id : item)}
      filter={filter}
      useFilter={useFilter}
      onChange={onChange}
      placeholder='Select Part'
    />
  )
}

PartSelect.propTypes = {
  onChange: PropTypes.func.isRequired,
  filter: PropTypes.object,
  useFilter: PropTypes.bool
}

PartSelect.defaultProps = {
  filter: {},
  useFilter: false
}

export default PartSelect