import { createElement, render, useState } from 'rax';
import DriverUniversal from 'driver-universal';
import Text from 'rax-text';
import View from 'rax-view';
import { Form, Button, Input, Radio, Switch, DatePicker, Select } from '@alifd/meet';

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

const FormDemo = () => {
  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 });

  return (
    <View>
      <Text className="demo-title">Form</Text>
      <View className="demo-content" style={{ padding: 0 }}>
        <Form {...opts} onSubmit={handleSubmit}>
          <Form.Item label="UserName" required={true} requiredMessage="Must Input User Name">
            <Input outline={false} name="username" placeholder="Please Input User Name" />
          </Form.Item>
          <Form.Item
            label="Password"
            required={true}
            requiredMessage="Must Input Password"
            minLength={6}
            maxLength={16}
            minmaxMessage="Password must between 6 and 16"
          >
            <Input name="password" type="password" clear placeholder="Please Input Password" />
          </Form.Item>
          <Form.Item label="Test" help="This is some help texts">
            <Input
              outline={false}
              name="test"
              placeholder="Please input any text"
              onChange={(value) => console.log('Test onChange', value)}
            />
          </Form.Item>
          <Form.Item label="readOnly" help="This is some readOnly texts">
            <Input readOnly outline={false} name="readOnly" placeholder="readOnly" />
          </Form.Item>
          <Form.Item label="Select any options">
            <Select name="select">
              <Select.Option value="1">Option 1</Select.Option>
              <Select.Option value="2">Option 2</Select.Option>
              <Select.Option value="3">Option 3</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="Date">
            <DatePicker name="date" placeholder="Please select a date" />
          </Form.Item>
          <View style={{ marginTop: '10px' }}>
            <Form.Submit block type="primary">
              Submit
            </Form.Submit>
          </View>
        </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>
      </View>
    </View>
  );
};

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