<template>
  <div class="otp">
    <OTPInputs
      ref="otpInput"
      v-model="code"
      :inputCount="inputCount"
      :disabled="loading"
    />

    <Loader v-if="loading" />
    <div class="resend-text h700" v-else>
      <p>
        {{ $t("common.didntReceiveTryAgain") }}
      </p>
      <span class="timer" v-if="secondsLeft > 0">{{
        $t("common.inNSeconds", { number: formattedTimer })
      }}</span>
      <span id="otp-resend" class="resend" v-else @click="resend">{{
        $t("common.send")
      }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  onMounted,
  computed,
  nextTick,
  onBeforeUnmount,
  watch,
} from "vue";
import OTPInputs from "./OTPInputs.vue";
import { attachZero } from "@/utils";
import Loader from "../Loader.vue";

export default defineComponent({
  emits: ["resend", "submit"],
  components: { Loader, OTPInputs },
  props: {
    timer: {
      type: Number,
      default: 60,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    inputCount: {
      type: Number,
      default: 4,
    },
  },
  setup(props, { emit }) {
    const otpInput = ref(null);
    const code = ref("");
    const intervalId = ref<number>(null);
    const secondsLeft = ref(0);

    const formattedTimer = computed((): string => {
      const minutes = Math.floor(secondsLeft.value / 60);
      const seconds = secondsLeft.value % 60;
      return minutes + ":" + attachZero(seconds);
    });

    const resetInterval = (): void => {
      clearInterval(intervalId.value);
    };

    const setTimer = (): void => {
      resetInterval();
      secondsLeft.value = props.timer;
      intervalId.value = setInterval(() => {
        secondsLeft.value--;
        if (secondsLeft.value <= 0) {
          resetInterval();
        }
      }, 1000) as any;
    };

    const resend = (): void => {
      const otpInputs = otpInput.value.querySelectorAll(
        "input"
      ) as NodeListOf<HTMLInputElement>;
      otpInputs.forEach((e: HTMLInputElement) => {
        e.value = "";
        e.dispatchEvent(new CustomEvent("input"));
      });
      emit("resend", () => {
        nextTick(() => {
          setTimer();
        });
      });
    };

    onBeforeUnmount(() => {
      resetInterval();
    });

    onMounted(() => {
      setTimer();
    });

    watch(
      () => props.inputCount,
      (newValue) => {
        if (newValue === props.inputCount) {
          emit("submit", newValue);
        }
      }
    );

    return {
      code,
      otpInput,
      secondsLeft,
      formattedTimer,
    };
  },
});
// export default class OTP extends Vue {
// }
</script>

<style scoped lang="scss">
.otp {
  display: flex;
  flex-direction: column;
  align-items: center;
  --loader-color: var(--blue);

  .loader {
    margin-top: auto;
  }

  .resend-text {
    margin-top: auto;
    text-align: center;
    color: var(--text-color-secondary);
    margin-bottom: 8px;

    p {
      display: inline;
    }

    .resend {
      cursor: pointer;
    }

    span {
      color: var(--blue);
      margin-left: 4px;
    }
  }

  @include screen-md() {
    .resend-text {
      margin-bottom: 16px;
    }

    :deep(br) {
      display: none;
    }
  }
}
</style>
