import { Button, Spin, Empty, Popconfirm } from "antd";
import React, { useState, forwardRef, useEffect } from "react";
import { useModel } from "umi";
import {
  HistoryList,
  RevertHistory,
  DeleteHistory,
} from "@/api/systemDesigner";
import { useRequest } from "umi";

type HistoryItem = {
  id: string;
  title: string;
  createdTime: string;
  json: string;
};

export default forwardRef(function HistoryPanel(
  props: {
    graphId: string;
    onRevert: () => void;
  },
  ref
) {
  const { showHistory, setShowHistory } = useModel("appModel");
  const [data, setData] = useState<HistoryItem[]>();

  const { run, loading } = useRequest(HistoryList, {
    manual: true,
    defaultParams: [{ id: props.graphId }],
    onSuccess(res) {
      setData(res?.result);
    },
  });

  useEffect(() => {
    if (showHistory && props.graphId) {
      run({
        id: props.graphId,
      });
    }
  }, [props.graphId, showHistory]);

  const handleDeleteHistory = (id: string) => {
    DeleteHistory({ id }).then(() => {
      run({
        id: props.graphId,
      });
    });
  };

  const handleRevertHistory = (id: string) => {
    RevertHistory({ id }).then(() => {
      run({
        id: props.graphId,
      });
      props.onRevert?.();
    });
  };

  const ItemComponent = ({ history }: { history: HistoryItem }) => {
    const [showBtn, setShowBtn] = useState(false);

    return (
      <div
        className="flex items-center p-12px hover:bg-#f9f9f9"
        onMouseOver={() => setShowBtn(true)}
        onMouseOut={() => setShowBtn(false)}
      >
        <div className="flex-1">
          <div className="text-sm text-#333">手动保存</div>
          <div className="text-xs text-#999">{history.createdTime}</div>
        </div>
        {showBtn && (
          <div>
            <Popconfirm
              title="确定要恢复记录吗？"
              okText="确定"
              cancelText="取消"
              onConfirm={() => handleRevertHistory(history.id)}
            >
              <Button
                type="text"
                size="small"
                icon={<i className="iconfont icon-lishijilu" />}
              />
            </Popconfirm>
            <Popconfirm
              title="确定要删除记录吗？"
              okText="确定"
              cancelText="取消"
              onConfirm={() => handleDeleteHistory(history.id)}
            >
              <Button
                type="text"
                size="small"
                icon={<i className="iconfont icon-shanchu" />}
              />
            </Popconfirm>
          </div>
        )}
      </div>
    );
  };

  return (
    <div
      className="absolute left-0 top-0 w-full h-full bg-white flex flex-col"
      style={{ display: showHistory ? "flex" : "none" }}
    >
      <div className="flex py-8px px-12px items-center border-b-1px border-b-solid border-b-#eee">
        <div className="flex-1">历史记录</div>
        <div
          className="w-16px h-16px cursor-pointer"
          onClick={() => setShowHistory(false)}
        >
          <i className="iconfont icon-cuowu-1 color-#666 hover:color-#333" />
        </div>
      </div>
      <div className="flex-1 overflow-y-auto">
        {!loading && data?.length ? (
          <Spin spinning={loading}>
            {data?.map((item: HistoryItem, i: number) => (
              <ItemComponent history={item} key={i} />
            ))}
          </Spin>
        ) : (
          <Empty className="mt-40px" description={"暂无历史记录"} />
        )}
      </div>
    </div>
  );
});
