import React, { useState } from 'react';
import { Input, Row, Col, Form } from '@btri-ui/base';
import { Checkbox } from '@btri-ui/base';
import { Button } from '@btri-ui/base';
import { Radio } from '@btri-ui/base';
import { Switch } from '@btri-ui/base';
import { Select } from '@btri-ui/base';
import { Space } from '@btri-ui/base';

export default () => {
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const [form] = Form.useForm();
  const onReset = () => {
    form.resetFields();
  };

  const [labelAlign, setLabelAlign] = useState('right');

  return (
    <Space size="S" direction="vertical" style={{ width: '100%' }}>
      <Row autoMode={true}>
        <Col span={4}>
          <Radio.Group
            defaultValue="right"
            onChange={e => {
              setLabelAlign(e.target.value);
            }}
          >
            <Radio.Button value="left">左对齐</Radio.Button>
            <Radio.Button value="right">右对齐</Radio.Button>
          </Radio.Group>
        </Col>
      </Row>

      <Row autoMode={true}>
        <Col span={8}>
          <Form
            form={form}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            name="basic"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
            labelAlign={labelAlign}
          >
            <Form.Item
              name="text"
              label="输入框"
              rules={[{ required: true, message: '请输入文本!' }]}
            >
              <Input placeholder="请输入文本" />
            </Form.Item>

            <Form.Item name="radio" label="单选框">
              <Radio.Group>
                <Radio value="radio1"> 选项1 </Radio>
                <Radio value="radio2"> 选项2 </Radio>
                <Radio value="radio3"> 选项3 </Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item name="checkbox" label="多选框">
              <Checkbox.Group>
                <Checkbox value="checkbox1"> 选项1 </Checkbox>
                <Checkbox value="checkbox2"> 选项2 </Checkbox>
                <Checkbox value="checkbox3"> 选项3 </Checkbox>
              </Checkbox.Group>
            </Form.Item>

            <Form.Item name="switch" label="开关">
              <Switch></Switch>
            </Form.Item>
            <Form.Item name="select" label="Select">
              <Select>
                <Select.Option value="demo">Demo</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
              <div style={{ display: 'flex', gap: '12px' }}>
                <Button type="primary" htmlType="submit">
                  Submit
                </Button>
                <Button htmlType="button" onClick={onReset} type="secondary">
                  Reset
                </Button>
              </div>
            </Form.Item>
          </Form>
        </Col>
      </Row>
    </Space>
  );
};