import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import {
  Button,
  Checkbox,
  Col,
  Form,
  Input,
  Radio,
  Row,
  Space,
  Typography,
} from "antd";
const { Text } = Typography;
import {} from "antd";
import { useEffect, useState } from "react";
import "./index.less";

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

interface IChapter {
  chapter_level: string;
  chapter_title: string;
  chapter_file_id?: string;
}

const Chatpter = (props: IProps) => {
  const [form] = Form.useForm();
  const [chapterList, setChapterList] = useState<IChapter[]>([]);

  const onTocChange = () => {
    const { toc } = form.getFieldsValue();
    const process = toc
      .split("\n")
      .filter((i: string) => i.replace(/\s/, "").length > 0)
      .map((row: string, index: number) => {
        const [chapter_level, chapter_title, chapter_file_id] = row.split("|");
        return !chapter_file_id
          ? { order: index, chapter_level, chapter_title }
          : { order: index, chapter_level, chapter_title, chapter_file_id };
      });
    setChapterList(process);
  };

  useEffect(() => {
    if (props.onChange) props.onChange(chapterList);
  }, [chapterList]);

  return (
    <div style={{ ...props.styles }}>
      <Row gutter={24}>
        <Col span={12}>
          <Form form={form} onChange={onTocChange}>
            <Form.Item name="toc">
              <Input.TextArea
                placeholder="级别 | 标题 | FileId"
                style={{ minHeight: 600, lineHeight: 2, fontSize: 16 }}
              ></Input.TextArea>
            </Form.Item>
          </Form>
        </Col>
        <Col span={12}>
          <ul className="chapter-list">
            {chapterList.map((c, index) => (
              <li
                key={index}
                className={+c.chapter_level === 1 ? "l1" : ""}
                style={{ paddingLeft: +c.chapter_level === 1 ? 0 : 20 }}
              >
                <Text style={{ fontSize: +c.chapter_level === 1 ? 18 : 16 }}>
                  {c.chapter_title}
                </Text>
                {c.chapter_file_id && (
                  <Text type="secondary">{c.chapter_file_id}</Text>
                )}
              </li>
            ))}
          </ul>
        </Col>
      </Row>
    </div>
  );
};

export default Chatpter;