<template>
  <div class="column items-center full-width">
    <q-img
      :src="Logo"
      style="max-width: 379px; max-height: 106px; height: 100%; width: 100%"
    />

    <div class="text-h5 text-weight-regular q-mt-lg text-primary text-center">
      Definir nova senha
    </div>

    <div
      class="items-center full-width q-px-lg q-mt-lg"
      style="display: flex; gap: 12px"
    >
      <div class="bg-primary" style="height: 1px; flex: 1"></div>
      <q-icon name="mdi-chevron-down" size="lg" color="warning" />
      <div class="bg-primary" style="height: 1px; flex: 1"></div>
    </div>

    <q-form
      class="full-width q-px-lg column q-gutter-y-md q-mt-md"
      @submit.prevent="emit('submit', { password, passwordConfirmation })"
    >
      <DefaultPasswordInput
        v-model="password"
        label="Nova senha"
        lazy-rules
        :rules="[inputRules.required, inputRules.min(8)]"
      />

      <DefaultPasswordInput
        v-model="passwordConfirmation"
        label="Confirmar nova senha"
        lazy-rules
        :rules="[inputRules.required, (v) => v === password || 'As senhas não conferem']"
      />

      <q-btn
        class="full-width q-mt-sm"
        color="primary-2"
        label="Confirmar"
        size="md"
        padding="sm"
        type="submit"
        :loading
      >
        <template #loading>
          <q-spinner />
        </template>
      </q-btn>
    </q-form>
  </div>
</template>

<script setup>
import Logo from "src/assets/images/logo.svg";
import DefaultPasswordInput from "src/components/defaults/DefaultPasswordInput.vue";
import { useInputRules } from "src/composables/useInputRules";
import { ref } from "vue";

defineProps({
  loading: Boolean,
});

const emit = defineEmits(["submit"]);

const password = ref("");
const passwordConfirmation = ref("");
const { inputRules } = useInputRules();
</script>
