import React from 'react';
import { Input, Select, DatePicker } from 'antd';

const Option = Select.Option;
const { RangePicker } = DatePicker;

export default props => {
  const { style, type, value, options = [], placeholder, render, onChange } = props;

  if (typeof render === 'function') {
    const Element = render();
    return React.cloneElement(Element, { value, onChange });
  }

  const handleChange = e => {
    const isInput = !type || type === 'text' || type === 'input';
    onChange(isInput ? e.target.value : e);
  };

  switch (type) {
    case 'datepicker':
      return <DatePicker value={value} placeholder={placeholder} onChange={handleChange} />;
    case 'rangepicker':
      return <RangePicker value={value} placeholder={placeholder} onChange={handleChange} />;
    case 'select':
      return (
        <Select
          style={style || { width: 160 }}
          placeholder={placeholder}
          value={value}
          onChange={handleChange}
        >
          {options.map(item => (
            <Option key={item.value} value={item.value}>
              {item.label}
            </Option>
          ))}
        </Select>
      );
    case 'text':
    case 'input':
    default:
      return (
        <Input style={style} value={value} placeholder={placeholder} onChange={handleChange} />
      );
  }
};
