import { observer } from 'mobx-react';
import { Radio, Select } from 'antd';
import { dataFieldOptions } from '../libs/ht';

export default observer((props) => {
  const { visible, dataRaw, dataMapper, fieldMapper, onChange, ...extProps } = props;
  const handleChange = (value) => {
    // console.log('handleChange', value);
    if (typeof onChange === 'function') {
      onChange(value);
    }
  };
  const defaultVal = dataFieldOptions[0].value;

  const Component = () =>
    dataFieldOptions.length < 5 ? (
      <Radio.Group options={dataFieldOptions} optionType="button" onChange={(e) => handleChange(e.target.value)} defaultValue={defaultVal} {...extProps} />
    ) : (
      <Select showSearch options={dataFieldOptions} onChange={handleChange} defaultValue={defaultVal} {...extProps} />
    );

  return <>{visible !== false ? <Component /> : null}</>;
});