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

export default function IntroExample() {
  const [current, setCurrent] = useState(-2);

  return (
    <>
      <Button
        id="button"
        onClick={() => {
          setCurrent(-1);
        }}
      >
        Guide
      </Button>

      <Guide
        current={current}
        onCurrentChange={setCurrent}
        hideCancelButton
        showMask={false}
        visibleEllipseAnimation
        visibleTriangleArrow={false}
        visibleCloseBtn
        showDot
        showBackButton
        hideCount
        nextButtonTheme="primary"
        visible
        startFinishText="马上开始"
        startContent={{
          element: () => document.querySelector("#logo"),
          title: "Tea start",
          description: (
            <div>
              您可通过服务器卡片<a className="tea-link-external">一键登录</a>{" "}
              轻量应用服务器，我们也在服务器详情页提供多种登录方式
            </div>
          ),
          placement: "bottom-start",
          image:
            "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/d45e7bd5-b44a-45f7-9589-db63a223b662.png",
        }}
        steps={[
          {
            element: () => document.querySelector("#logo"),
            title: "Tea",
            description: (
              <div>
                您可通过服务器卡片<a className="tea-link-external">一键登录</a>{" "}
                轻量应用服务器，我们也在服务器详情页提供多种登录方式
              </div>
            ),
            placement: "bottom-start",
            image:
              "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/d45e7bd5-b44a-45f7-9589-db63a223b662.png",
          },
          {
            element: () => document.querySelector("#header-component"),
            title: "组件",
            description: "Tea 组件相关文档",
            placement: "bottom-start",
            image:
              "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/d45e7bd5-b44a-45f7-9589-db63a223b662.png",
          },
          {
            element: () => document.querySelector(".tea-search-head"),
            title: "搜索",
            description: "输入关键词搜索相应组件",
            image:
              "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/d45e7bd5-b44a-45f7-9589-db63a223b662.png",
          },
          {
            element: () => document.querySelector("#button"),
            title: "运行示例",
            description: "在 CodePen 运行当前示例",
            placement: "right-start",
            arrowPointAtCenter: true,
            image:
              "https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/d45e7bd5-b44a-45f7-9589-db63a223b662.png",
          },
        ]}
      ></Guide>
    </>
  );
}