import "../../../../node_modules/.pnpm/vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.mjs";
import { defineComponent, watch, openBlock, createElementBlock, createElementVNode as createBaseVNode, nextTick } from "../../../../node_modules/.pnpm/@vue_runtime-core@3.3.4/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.mjs";
import { useCssVars } from "../../../../node_modules/.pnpm/@vue_runtime-dom@3.3.4/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.mjs";
import { ref } from "../../../../node_modules/.pnpm/@vue_reactivity@3.3.4/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.mjs";
import { normalizeClass } from "../../../../node_modules/.pnpm/@vue_shared@3.3.4/node_modules/@vue/shared/dist/shared.esm-bundler.mjs";
const _hoisted_1 = ["data-front"];
const _hoisted_2 = ["data-back"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    flipType: {
      type: String,
      default: () => {
        return "down";
      }
    },
    count: {
      type: [Number, String],
      default: 0
    },
    duration: {
      type: Number,
      default: 600
    },
    width: {
      type: Number,
      default: 60
    },
    height: {
      type: Number,
      default: 100
    },
    radius: {
      type: Number,
      default: 10
    },
    frontColor: {
      type: String,
      default: "#ffffff"
    },
    backColor: {
      type: String,
      default: "#000000"
    },
    borderWidth: {
      type: Number,
      default: 2
    }
  },
  setup(__props) {
    const props = __props;
    useCssVars((_ctx) => ({
      "06b40856": props.frontColor,
      "39840b7e": props.backColor,
      "ddd97676": `${props.radius}px`,
      "43622609": `${props.width}px`,
      "4281d24c": `${props.height}px`,
      "45eb2214": `${props.height * 2}px`,
      "6026284e": `${props.borderWidth * 2}px`,
      "76a98bc6": `${props.duration / 1e3}s`
    }));
    const isFlipping = ref(false);
    const frontTextFromData = ref(props.count || 0);
    const backTextFromData = ref(props.count || 0);
    let timeoutID = 0;
    const flip = async (front, back) => {
      if (isFlipping.value) {
        isFlipping.value = false;
        clearTimeout(timeoutID);
        await nextTick();
        await flip(front, back);
        return;
      }
      backTextFromData.value = back;
      frontTextFromData.value = front;
      isFlipping.value = true;
      timeoutID = setTimeout(() => {
        isFlipping.value = false;
        frontTextFromData.value = back;
      }, props.duration);
    };
    watch(
      () => props.count,
      (newVal, oldVal) => {
        flip(oldVal, newVal);
      },
      {
        immediate: true
      }
    );
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(["go-flipper", [__props.flipType, { go: isFlipping.value }]])
      }, [
        createBaseVNode("div", {
          class: "digital front",
          "data-front": frontTextFromData.value
        }, null, 8, _hoisted_1),
        createBaseVNode("div", {
          class: "digital back",
          "data-back": backTextFromData.value
        }, null, 8, _hoisted_2)
      ], 2);
    };
  }
});
export {
  _sfc_main as default
};
