import { PropType, defineComponent, onMounted, reactive } from "vue";
import DetailGuide from "./detail-guide";
import FingerGuide from "./finger-guide";
import { getQuery } from "/src/utils/queryString";

type guideType = "detail" | "finger";
export default defineComponent({
  name: "guide-index",
  props: {
    list: {
      type: Array as PropType<guideType[]>,
      default: "",
    },
    showGuide: {
      type: Boolean,
      default: true,
    },
    /** 听音练习的模式 */
    fingeringMode: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const query = getQuery();
    const detailGuideKey = "detailGuideKey";
    const fingerGuideKey = "fingerGuideKey";
    const data = reactive({
      list: props.list,
      detailShow: false,
      fingerShow: false,
    });
    const init = () => {
      if (props.showGuide && !query.showGuide) return;
      if (data.list.includes("detail")) {
        if (localStorage.getItem(detailGuideKey)) return;
        setTimeout(() => {
          data.detailShow = true;
        }, 300);
      }
      if (data.list.includes("finger")) {
        if (localStorage.getItem(fingerGuideKey)) return;
        data.fingerShow = true;
      }
    };
    onMounted(() => {
      init();
    });
    return () => (
      <>
        {data.detailShow && (
          <DetailGuide
            onClose={(val) => {
              if (val) {
                localStorage.setItem(detailGuideKey, "1");
              }
              data.detailShow = false;
            }}
          />
        )}
        {data.fingerShow && (
          <FingerGuide
            fingeringMode={props.fingeringMode}
            onClose={(val) => {
              if (val) {
                localStorage.setItem(fingerGuideKey, "1");
              }
              data.fingerShow = false;
            }}
          />
        )}
      </>
    );
  },
});
