<template>
  <q-card-section class="no-padding q-mb-xl">
    <div class="text-text q-mb-xs text-left">
      <span class="text-weight-medium">{{ $t('auth.validation_code') }}</span>
    </div>

    <div class="code-boxes-wrapper" @click="focusCodeInput">
      <div
        v-for="i in 6"
        :key="i"
        class="code-box"
        :class="{ 'code-box--active': code.length === i - 1 }"
      >
        <span v-if="code[i - 1]" class="text-text">{{ code[i - 1] }}</span>
        <span v-else class="text-text-light text-h6">{{ placeholder }}</span>
      </div>
    </div>

    <q-input
      ref="codeInputRef"
      v-model="code"
      no-error-icon
      class="code-hidden-input"
      hide-bottom-space
      :rules="[inputRules.required]"
      lazy-rules
      mask="######"
      inputmode="numeric"
    />
  </q-card-section>
</template>

<script setup>
import { ref } from 'vue';
import { useInputRules } from 'src/composables/useInputRules';

const code = defineModel('code', { type: String, required: true });

const { inputRules } = useInputRules();
const codeInputRef = ref(null);
const placeholder = 'x';

const focusCodeInput = () => {
  codeInputRef.value?.$el.querySelector('input')?.focus();
};
</script>

<style lang="scss" scoped>
.code-boxes-wrapper {
  display: flex;
  gap: 10px;
  justify-content: center;
  cursor: text;

  .code-box {
    width: 44px;
    height: 45px;
    border: 2px solid #e4e4e4;
    background-color: #F9FAFB;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--q-text);
    transition: border-color 0.2s ease;

    &--active {
      border-color: var(--q-primary);
    }
  }
}

.code-hidden-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  overflow: hidden;
}
</style>
