import { Config, DriveStep, PopoverDOM, State, driver } from 'driver.js';
import 'driver.js/dist/driver.css';
import { defineComponent, nextTick, ref } from 'vue';

const endGuide = (guideInfo: any) => {
  try {
    // setGuidance({ guideTag: "guideInfo", guideValue: JSON.stringify(guideInfo) });
    localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
  } catch (e) {
    console.log(e);
  }
};

/** 练习模式 */
export const GuideDriver = defineComponent({
  name: 'GuideDriver',
  // props: {
  //   // 按钮状态
  //   statusAll: {
  //     type: Object as PropType<ButtonStatus>,
  //     default: () => {},
  //   },
  // },
  setup(props) {
    let driverObj: any;
    const driverOptions: Config = {
      showProgress: false,
      allowClose: true,
      // popoverOffset: 3,
      disableActiveInteraction: true,
      onCloseClick: () => {
        onDriverClose();
      },
      onHighlightStarted: () => {
        // driverNextStatus.value = true;
      },
      onHighlighted: () => {
        // driverNextStatus.value = false;
      },
      steps: [
        {
          element: '.home-1',
          popover: {
            title: '操作指南',
            description: '点击这里可以查看界面的功能说明和操作指南',
            popoverClass: 'popoverClass popoverClassF1',
            align: 'center',
            side: 'bottom',
            nextBtnText: `我知道了`,
            showButtons: ['next', 'close'],
            onPopoverRender: (
              popover: PopoverDOM,
              options: { config: Config; state: State }
            ) => {
              options.config.stageRadius = 5;
              options.config.stagePadding = 0;
            },
            onCloseClick: () => {
              onDriverClose()
            },
            onNextClick: () => {
              onDriverClose();
            },
          }
        }
      ]
    };
    const guideInfo = ref({} as any);
    const getAllGuidance = async () => {
      try {
        const res = localStorage.getItem('teacher-guideInfo');
        if (res) {
          guideInfo.value = JSON.parse(res) || null;
        } else {
          guideInfo.value = {};
        }

        if (!(guideInfo.value && guideInfo.value.homeGuide)) {
          nextTick(() => {
            driverObj = driver(driverOptions);
            driverObj.drive(0);
          });
        }
      } catch (e) {
        console.log(e);
      }
    };

    getAllGuidance();

    // 结束关闭弹窗
    const onDriverClose = () => {
      if (!guideInfo.value) {
        guideInfo.value = { homeGuide: true };
      } else {
        guideInfo.value.homeGuide = true;
      }
      endGuide(guideInfo.value);
      driverObj.destroy();
      // document.querySelector('.driver-popover-close-btn-custom')?.remove();
      // document.removeEventListener('click', handleClickOutside, true);
      // state.hasDriverPop = false;
    };
    // return () => <div>1212</div>
  }
});
