import { Table } from "./interface";
import { reactive, computed, toRefs } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { useGlobalStore } from "@/stores/modules/global";
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
import { ElMessageBox } from "element-plus";

/**
 * @description 新手引导
 * @host https://driverjs.com/docs/configuration
 * @param key 新手指导关键id
 * @param steps 指导步骤
 */
export const useTour = (t: any, key: string, steps: any[]) => {
  const globalStore = useGlobalStore();

  /**
   * @description 我知道
   * @param driverObj
   */
  const iKnowIt = (driverObj: any) => {
    let arr = globalStore.noviceTutorial ?? [];
    !arr.includes(key) && arr.push(key);
    globalStore.setGlobalState("noviceTutorial", arr);

    driverObj.destroy();
  };

  /**
   * @description 新手引导
   */
  const guide = (newSteps?: any) => {
    const driverObj = driver({
      showProgress: true,
      progressText: "{{current}} / {{total}}",
      doneBtnText: "结束",
      nextBtnText: "下一步",
      prevBtnText: "上一步",
      steps: newSteps ?? steps,
      onDestroyStarted: (element: any) => {
        if (globalStore.noviceTutorial?.includes(key)) {
          driverObj.destroy();
          return;
        }

        if (!driverObj.hasNextStep() || confirm(t("business.tips.guide.destory"))) {
          driverObj.destroy();
        }
      },
      onCloseClick: (element: any) => {
        iKnowIt(driverObj);
      },
      onNextClick: (element: any, step: any, options) => {
        if (driverObj.hasNextStep()) {
          driverObj.moveNext();
        } else {
          iKnowIt(driverObj);
        }
      }
    });
    driverObj.drive();
  };

  /**
   * @description 检查并展示新手指引
   * @param allowShow 跳过缓存检查，展示指引，默认：false
   */
  const checkIfNeedGuide = (allowShow: boolean = false, newSteps?: any) => {
    if (!allowShow) {
      if (globalStore.noviceTutorial?.includes(key)) {
        return false;
      }
    }
    guide(newSteps);
  };

  return {
    checkIfNeedGuide
  };
};
