import * as React from 'react';
import {
  Input,
  Select,
  Radio,
  DatePicker2,
  NumberPicker,
  Checkbox,
} from '@alife/cn-ui';
import { ConfigProps } from 'src/types/op-form';
import OPSwitch from '../op-switch';

const Item = (props: ConfigProps) => {
  const { type, render, name, label, ...restProps } = props;
  const itemProps = { ...restProps };
  const supperType = type?.toLowerCase();
  let ItemComponent: any = null;
  switch (supperType) {
    case 'input':
      ItemComponent = Input;
      break;
    case 'select':
      itemProps.popupClassName = 'op-select-menu';
      ItemComponent = Select;
      break;
    case 'number':
      ItemComponent = NumberPicker;
      break;
    case 'radio':
      ItemComponent = Radio.Group;
      break;
    case 'checkbox':
      ItemComponent = Checkbox.Group;
      break;
    case 'switch':
      ItemComponent = OPSwitch;
      break;
    case 'datepicker':
      ItemComponent = DatePicker2;
      break;
    case 'daterangepicker':
      ItemComponent = DatePicker2.RangePicker;
      break;
    case 'textarea':
      ItemComponent = Input.TextArea;
      break;
    case 'render':
      ItemComponent = render;
      break;
    default:
      ItemComponent = Input;
      break;
  }

  return <ItemComponent {...itemProps} />;
};

export default Item;