import React, { useState } from "react";
import {
  Form,
  Input,
  RadioGroup,
  Radio,
  CheckboxGroup,
  Checkbox,
  InputNumber,
  Card,
  Segment,
  Button,
  Switch,
} from "@tencent/tea-component";

export default function FormLayoutExample() {
  /** @type {any} */
  const [layout, setLayout] = useState("default");
  const [hideLabel, setHideLabel] = useState(false);

  return (
    <div className="example-stage">
      <Card>
        <Card.Body>
          <Form.Title>布局选项</Form.Title>
          <Form hideLabel={hideLabel}>
            <Form.Item label="布局类型">
              <Segment
                value={layout}
                onChange={layout => setLayout(layout)}
                options={[
                  { value: "default", text: "默认", tooltip: "default" },
                  { value: "fixed", text: "定宽", tooltip: "fixed" },
                  { value: "vertical", text: "垂直", tooltip: "vertical" },
                  { value: "inline", text: "内联", tooltip: "inline" },
                  {
                    value: "inline-vertical",
                    text: "内联垂直",
                    tooltip: "inline-vertical",
                  },
                ]}
              />
            </Form.Item>
            <Form.Item label="隐藏 Label">
              <Switch
                value={hideLabel}
                onChange={value => setHideLabel(value)}
              />
            </Form.Item>
          </Form>
          <hr />
          <Form.Title>布局效果</Form.Title>
          <Form layout={layout} hideLabel={hideLabel}>
            <Form.Item label="姓名">
              <Input placeholder="你是谁" />
            </Form.Item>
            <Form.Item label="性别">
              <RadioGroup>
                <Radio name="male">男</Radio>
                <Radio name="female">女</Radio>
              </RadioGroup>
            </Form.Item>
            <Form.Item label="年龄">
              <InputNumber defaultValue={18} min={12} max={100} />
            </Form.Item>
            <Form.Item label="兴趣">
              <CheckboxGroup>
                <Checkbox name="code">编程</Checkbox>
                <Checkbox name="web">抠图</Checkbox>
                <Checkbox name="jinli">超越</Checkbox>
              </CheckboxGroup>
            </Form.Item>
            <Form.Item label="自我介绍" tips="100 字以内">
              <Input multiline placeholder="介绍下自己" />
            </Form.Item>
          </Form>
          <Form.Action>
            <Button type="primary">保存</Button>
            <Button>取消</Button>
          </Form.Action>
        </Card.Body>
      </Card>
    </div>
  );
}