import { Select } from 'antd'
import PropTypes from 'prop-types'
import { objectModels } from '../../../database/ObjectModels'
import ObjectTypeDisplay from './ObjectTypeDisplay'

const ObjectTypeSelect = ({
  value,
  onChange,
  style,
  placeholder = 'Select object type...',
  showSearch = true,
  allowClear = true,
  disabled = false
}) => {
  // Create options from object models
  const options = objectModels
    .sort((a, b) => a.label.localeCompare(b.label))
    .map((model) => ({
      value: model.name,
      label: <ObjectTypeDisplay objectType={model.name} />
    }))

  console.log('VALUE', value)

  return (
    <Select
      showSearch={showSearch}
      style={{ width: '100%', ...style }}
      placeholder={placeholder}
      optionFilterProp='children'
      value={value}
      onChange={onChange}
      allowClear={allowClear}
      disabled={disabled}
      filterOption={(input, option) =>
        option.label.props.children[1].props.children
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      }
      options={options}
    />
  )
}

ObjectTypeSelect.propTypes = {
  value: PropTypes.string,
  onChange: PropTypes.func,
  style: PropTypes.object,
  placeholder: PropTypes.string,
  showSearch: PropTypes.bool,
  allowClear: PropTypes.bool,
  disabled: PropTypes.bool
}

export default ObjectTypeSelect
