<template>
  <q-card-section class="full-width">
    <div class="text-text">
      <span class="font12 fontbold">
        {{ $t("common.terms.email") }}
      </span>
    </div>

    <q-input
      v-model="email"
      class="bg-surface q-mt-sm"
      hide-bottom-space
      input-class="font12 fontmedium text-text"
      lazy-rules
      no-error-icon
      outlined
      rounded
      :bottom-slots="false"
      :error="!!serverErrors.email"
      :error-message="serverErrors.email"
      :placeholder="$t('common.terms.email')"
      :rules="!smsEnabled || !phone ? [inputRules.requiredHideMessage, inputRules.email] : [inputRules.email]"
      @update:model-value="clearServerError('email')"
    />

    <template v-if="smsEnabled">
      <div class="col-12 q-py-lg row">
        <div class="col-5 q-my-auto">
          <q-separator class="bg-grey-4 q-my-sm" />
        </div>

        <span class="col font12 fontmedium text-center text-text">
          {{ $t("common.ui.misc.or") }}
        </span>

        <div class="col-5 q-my-auto">
          <q-separator class="bg-grey-4 q-my-sm" />
        </div>
      </div>

      <div class="text-text">
        <span class="font12 fontbold">
          {{ $t("common.terms.phone") }}
        </span>

        <span class="font12 fontlight">
          {{ ` (${$t("common.terms.celular")})` }}
        </span>
      </div>

      <q-input
        v-model="phone"
        class="bg-surface q-mt-sm"
        hide-bottom-space
        input-class="text-text"
        lazy-rules
        mask="(##) #####-####"
        no-error-icon
        :bottom-slots="false"
        :error="!!serverErrors.phone"
        :error-message="serverErrors.phone"
        :placeholder="$t('common.terms.phone')"
        :rules="!email ? [inputRules.requiredHideMessage, inputRules.phone] : [inputRules.phone]"
        @update:model-value="clearServerError('phone')"
      />
    </template>
  </q-card-section>
</template>

<script setup>
import { inject } from "vue";
import { useInputRules } from "src/composables/useInputRules";

const email = defineModel("email", {
  required: true,
  type: String,
});

const phone = defineModel("phone", {
  required: true,
  type: String,
});

defineProps({
  serverErrors: {
    type: Object,
    default: () => ({}),
  },
  smsEnabled: {
    type: Boolean,
    default: false,
  },
});

const clearServerError = inject("clearServerError", () => {});

const { inputRules } = useInputRules();
</script>
