import { useEffect, useMemo, useState } from "react";
import { Steps } from "antd";
import type { StepsProps } from "antd/es/steps";
import { LoadingOutlined } from "@ant-design/icons";

import Flowchart from "./Flowchart";
import Mindmap from "./Mindmap";

export default function GenerateBubble() {
  const [step, setStep] = useState(0);
  const stepItems = useMemo(() => {
    const items = [
      {
        title: "系统设计",
        status: "finish",
      },
      {
        title: "数据模型",
        status: "process",
      },
      {
        title: "页面设计",
        status: "wait",
      },
      {
        title: "代码生成",
        status: "wait",
      },
      {
        title: "发布应用",
        status: "wait",
      },
    ];

    return items.map((item, index) => {
      if (index < step) {
        return {
          ...item,
          status: "finish",
          icon: null
        };
      }
      if (index === step) {
        return {
          ...item,
          status: "process",
          icon: <LoadingOutlined />,
        };
      }
      if (index > step) {
        return {
          ...item,
          status: "wait",
          icon: null,
        };
      }
      return item;
    }) as StepsProps["items"];
  }, [step]);

  useEffect(() => {
    setTimeout(() => {
      setStep((state) => state + 1);
    }, 4000);
  }, [])
  return (
    <div className="w-full h-500px flex">
      <div className="w-200px">
        <Steps className="h-full" items={stepItems} direction="vertical" />
      </div>
      <div className="flex-1 bg-#fff p-12px rounded-12px">
        <Flowchart data={[]}/>
        {/* <Mindmap data={[]}/> */}
      </div>
    </div>
  );
}
