import React, { useState } from "react";
import { Button, Modal } from "@tencent/tea-component";

export default function ModalSceneExample() {
  const [answer, setAnswer] = useState(null);

  const askQuestion = async () => {
    const yes = await Modal.confirm({
      message: "确认删除当前所选实例？",
      description: "删除后，该实例下的所有配置将会被清空，且无法恢复。",
      okText: "删除",
      cancelText: "取消",
    });

    setAnswer(yes ? "已删除" : "未删除");
  };

  const alertSuccess = () =>
    Modal.success({
      message: "路由表更新成功！",
      description: "配置将在 1-3 分钟内同步到集群中的路由节点",
    });

  const alertError = () =>
    Modal.error({
      message: "路由表更新失败！",
      description: "路由表包含无效的路由转发策略公网网关的网络",
    });

  const alertCustom = () =>
    Modal.alert({
      type: "pending",
      message: "重启成功",
      description: "大约需要 2 分钟，请稍后再登录机器",
      buttons: [
        <Button type="primary" onClick={() => console.log("已确认")}>
          确认
        </Button>,
        <Button onClick={() => window.location.reload()}>刷新页面</Button>,
      ],
    });

  const style = { marginRight: 5 };
  return (
    <>
      <Button style={style} onClick={askQuestion}>
        {answer || "删除前询问"}
      </Button>
      <Button style={style} onClick={alertSuccess}>
        提示成功
      </Button>
      <Button style={style} onClick={alertError}>
        提示失败
      </Button>
      <Button style={style} onClick={alertCustom}>
        自定义提示
      </Button>
    </>
  );
}