import { createElement, render, useState, useRef } from 'rax';
import DriverUniversal from 'driver-universal';
import View from 'rax-view';
import Text from 'rax-text';
import {
  Form,
  Button,
  InputField,
  SwitchField,
  SelectField,
  NumberPickerField,
  DatePickerField,
  UploadField,
  Radio,
  Switch,
} from '@alifd/meet';

import '../../components/index.css';

const evaluate = [
  {
    label: '很好',
    value: 'good',
  },
  {
    label: '一般',
    value: 'normal',
  },
  {
    label: '很差',
    value: 'bad',
  },
];

const FormDemo = () => {
  const formInstance = useRef(null);
  const [opts, setOpts] = useState({
    labelAlign: 'top',
    contentAlign: 'left',
    size: 'medium',
    isPreview: 0,
  });
  const handleSubmit = (values, errors) => console.log(values, errors);
  const handleChange = (values) => setOpts({ ...opts, ...values });

  const doSubmit = () => {
    if (formInstance.current) {
      formInstance.current.submit((data, errors) => {
        console.log(data, errors);
      });
    }
  };

  const onSetValue = () => {
    if (formInstance.current) {
      formInstance.current.setValue({
        name: 'Jack',
        email: 'example@example.com',
        score: 5,
        evaluate: 'good',
        anonymous: true,
        remark: '我是备注信息',
      });
    }
  };

  return (
    <View>
      <Text className="demo-title">Form</Text>
      <View className="demo-content" style={{ padding: 0 }}>
        <Form {...opts} onSubmit={handleSubmit} ref={formInstance}>
          <InputField name="name" label="用户名" placeholder="请输入用户名" required={true} />
          <InputField name="email" label="EMail" placeholder="请输入邮箱地址" format="email" />
          <DatePickerField name="date" label="消费日期" />
          <NumberPickerField name="score" min="1" max="5" defaultValue="5" label="打几分" />
          <SelectField name="evaluate" label="评价" placeholder="选择您的评价" dataSource={evaluate} />
          <SwitchField name="anonymous" label="匿名评价" />
          <InputField
            name="remark"
            label="备注"
            multiline={true}
            rows={3}
            placeholder="如果您有其他需求，请在这里备注"
          />
          <UploadField name="photo" label="上传图片" limit="5" />
        </Form>
      </View>
      <Text className="demo-title">Form options</Text>
      <View className="demo-content">
        <Form labelAlign="inset" value={opts} onChange={handleChange} labelWidth="100px">
          <Form.Item label="labelAlign">
            <Radio.Group direction="hoz" dataSource={['top', 'inset']} name="labelAlign" />
          </Form.Item>
          <Form.Item label="contentAlign">
            <Radio.Group direction="hoz" dataSource={['left', 'right']} name="contentAlign" />
          </Form.Item>
          <Form.Item label="size">
            <Radio.Group direction="hoz" dataSource={['small', 'medium', 'large']} name="size" />
          </Form.Item>
          <Form.Item label="isPreview" valuePropName="checked">
            <Switch name="isPreview" />
          </Form.Item>
          <Form.Item label="actions">
            <Button onClick={doSubmit}>Submit</Button>
            <Button onClick={onSetValue}>Set Value</Button>
          </Form.Item>
        </Form>
      </View>
    </View>
  );
};

// render(<FormDemo />, null, { driver: DriverUniversal });
 export default FormDemo