import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { Button, Col, Form, Input, Row, Space, Typography } from "antd";
const { Text } = Typography;

interface IProps {
  onChange?: Function;
  styles?: React.CSSProperties;
}

const Chatpter = (props: IProps) => {
  const [form] = Form.useForm();

  const onBlur = () => {
    console.log(form.getFieldsValue().chapter);
  };

  return (
    <div style={{ ...props.styles }}>
      <Form form={form} style={{ maxWidth: 600 }}>
        <Form.List name="chapter">
          {(fields, { add, remove }, { errors }) => (
            <>
              {fields.map((field, index) => (
                <Form.Item required={false} key={field.key}>
                  <Form.Item
                    {...field}
                    validateTrigger={["onChange", "onBlur"]}
                    rules={[{ required: true, message: "请输入章节名称" }]}
                    noStyle
                  >
                    <Input
                      placeholder="请输入章节名称"
                      onBlur={onBlur}
                      style={{ width: "60%" }}
                    />
                    <Text>{JSON.stringify(field)}</Text>
                  </Form.Item>
                  {fields.length > 1 ? (
                    <MinusCircleOutlined onClick={() => remove(field.name)} />
                  ) : null}
                </Form.Item>
              ))}
              <Form.Item>
                <Space>
                  <Button
                    type="dashed"
                    onClick={() => add("The head item", 0)}
                    block
                    icon={<PlusOutlined />}
                  >
                    1级章节
                  </Button>
                  <Button
                    type="primary"
                    onClick={() => add("The head item", 0)}
                    block
                    icon={<PlusOutlined />}
                  >
                    2级章节
                  </Button>
                </Space>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form>
    </div>
  );
};

export default Chatpter;