import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'vision-types';

class App extends Component {
  static propTypes = {
    name: PropTypes.string,
    age: PropTypes.number.isRequired,
    onChange: PropTypes.func,
    render: PropTypes.element,
    someNode: PropTypes.node.isRequired,
    other: PropTypes.any,

    sex: PropTypes.define(PropTypes.string, {
      initialValue: '',
      setter: 'ChoiceSetter',
      isRequired: true,
      options: [''],
      tip: 'aa',
      title: 'xxxx'
    }),
    addr: PropTypes.define(PropTypes.bool, {
      initialValue: '',
      setter: 'AddressSetter',
    }),

    nationality: PropTypes.oneOf(['zhong', 'mei']),

    // // TODO: 嵌套场景
    job: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.node], {
      initialValue: '',
      setter: 'ChoiceSetter'
    }),
    children: PropTypes.objectOf(PropTypes.string, {
      initialValue: '',
      setter: 'ChoiceSetter',
      isRequired: true
    }),
    test: PropTypes.instanceOf(Function, {
      initialValue: '',
      setter: 'FunctionInstanceSetter'
    })
  }
  render() {
    const { name, age, sex } = this.props;
    return (
      <div>
        VisionTypes
        {name} {age} {sex}
      </div>
    );
  }
}
console.log('name', App.propTypes.name.visionType)
console.log('age', App.propTypes.age.visionType)
console.log('onChange', App.propTypes.onChange.visionType)
console.log('render', App.propTypes.render.visionType)
console.log('someNode', App.propTypes.someNode.visionType)
console.log('other', App.propTypes.other.visionType)
console.log('sex', App.propTypes.sex.visionType)
console.log('addr', App.propTypes.addr.visionType)

console.log('nationality', App.propTypes.nationality.visionType)
console.log('job', App.propTypes.job.visionType)
console.log('children', App.propTypes.children.visionType)
console.log('test', App.propTypes.test.visionType)

ReactDOM.render((
  <App
    name = {'taoqili'}
    age = {1}
    sex = {'123123'}
    onChange={() => {}}
    render = {<div>123123</div>}
    someNode={<span>111</span>}
    nationality = {'zhong'}
    job = {<span>123123</span>}
    children={{a: '1123', b:'bbbb'}}
    test = {() => {}}
  />
), mountNode);