import React from 'react';

import {
  FieldType
} from '@alicloud/console-components';
import {
  InputText,
  InputSwitch,
  InputNumber,
  InputJsonObject
} from '@alicloud/demo-rc-elements';

import {
  IFieldValues
} from '../types';

interface IProps {
  field: FieldType<IFieldValues>;
}

export default function WithField({
  field
}: IProps): JSX.Element {
  const {
    init,
    getValue
  } = field;
  
  // 注意：initValue 只会在组件第一次初始化的时候被赋值，如果你是异步赋值请用 setValue
  return <>
    <InputJsonObject {...{
      value: {
        str: getValue('str'),
        num: getValue('num'),
        bool: getValue('bool')
      }
    }} />
    <InputText {...init('str')} />
    <InputSwitch {...init('bool')} />
    <InputNumber {...init('num')} />
  </>;
}