<template>
  <q-card-section class="no-padding">
    <div>
      <div class="text-text">
        <span class="font14 fontbold">{{ $t("auth.full_name") }}</span>
      </div>

      <q-input
        v-model="form.name"
        bg-color="surface"
        class="q-mt-sm q-mb-md"
        hide-bottom-space
        input-class="text-text"
        lazy-rules
        no-error-icon
        outlined
        rounded
        :placeholder="$t('auth.full_name')"
        :rules="[inputRules.required]"
      />
    </div>

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

      <q-input
        v-model="form.document"
        bg-color="surface"
        class="q-mt-sm q-mb-md"
        hide-bottom-space
        input-class="text-text"
        lazy-rules
        no-error-icon
        outlined
        rounded
        :placeholder="$t('common.terms.document')"
        :rules="[inputRules.cpfOrCnpj]"
      />
    </div>

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

      <q-input
        v-model="form.zip_code"
        bg-color="surface"
        class="q-mt-sm q-mb-md"
        hide-bottom-space
        input-class="text-text"
        lazy-rules
        mask="#####-###"
        no-error-icon
        outlined
        placeholder="00000-000"
        rounded
        :loading="loadingCep"
        :rules="[inputRules.required, inputRules.cep]"
        @update:model-value="onCepChange"
      />
    </div>

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

      <q-input
        v-model="form.address"
        bg-color="surface"
        class="q-mt-sm q-mb-md"
        hide-bottom-space
        input-class="text-text"
        lazy-rules
        no-error-icon
        outlined
        readonly
        rounded
        :placeholder="`${$t('common.terms.address')}...`"
        :rules="[inputRules.required]"
      />
    </div>

    <div class="row q-col-gutter-sm">
      <div class="col-4">
        <div class="text-text">
          <span class="font14 fontbold">
            {{ $t("common.terms.address_number") }}</span>
        </div>

        <q-input
          v-model="form.number"
          bg-color="surface"
          class="q-mt-sm q-mb-md"
          hide-bottom-space
          input-class="text-text"
          lazy-rules
          no-error-icon
          outlined
          placeholder="0000"
          rounded
          :rules="[inputRules.required]"
        />
      </div>

      <div class="col-8">
        <div class="text-text">
          <span class="font14 fontbold">{{ $t("common.terms.district") }}</span>
        </div>

        <q-input
          v-model="form.district"
          bg-color="surface"
          class="q-mt-sm q-mb-md"
          hide-bottom-space
          input-class="text-text"
          no-error-icon
          outlined
          readonly
          rounded
          :placeholder="`${$t('common.terms.district')}...`"
        />
      </div>
    </div>

    <div class="row q-col-gutter-sm">
      <div class="col-8">
        <div class="text-text">
          <span class="font14 fontbold">{{ $t("common.terms.city") }}</span>
        </div>

        <q-input
          v-model="form.city"
          bg-color="surface"
          class="q-mt-sm q-mb-md"
          input-class="text-text"
          no-error-icon
          outlined
          readonly
          rounded
        />
      </div>

      <div class="col-4">
        <div class="text-text">
          <span class="font14 fontbold">{{ $t("common.terms.state") }}</span>
        </div>

        <q-input
          v-model="form.state"
          bg-color="surface"
          class="q-mt-sm q-mb-md"
          hide-bottom-space
          input-class="text-text"
          no-error-icon
          outlined
          readonly
          rounded
        />
      </div>
    </div>

    <div>
      <q-checkbox
        v-model="form.no_complement"
        class="q-mb-md text-text font14 fontbold"
        color="primary"
        keep-color
        :label="$t('auth.no_complement')"
      />
    </div>

    <div>
      <template v-if="!form.no_complement">
        <div class="text-text">
          <span class="font14 fontbold">
            {{ $t("common.terms.complement") }}</span>
        </div>

        <q-input
          v-model="form.complement"
          bg-color="surface"
          class="q-mt-sm q-mb-md"
          hide-bottom-space
          input-class="text-text"
          lazy-rules
          no-error-icon
          outlined
          rounded
          :placeholder="`${$t('common.ui.misc.example')}: Apartamento, Conjunto, Casa`"
          :rules="!form.no_complement ? [inputRules.required] : []"
        />
      </template>
    </div>

    <div>
      <div class="text-text">
        <span class="font14 fontbold">{{ $t("auth.address_nickname") }}</span>
      </div>

      <q-input
        v-model="form.nickname"
        bg-color="surface"
        class="q-mt-sm q-mb-md"
        hide-bottom-space
        input-class="text-text"
        lazy-rules
        no-error-icon
        outlined
        rounded
        :placeholder="`${$t('common.ui.misc.example')}: Casa`"
      />
    </div>

    <div>
      <div class="text-text">
        <span class="font14 fontbold">
          {{ $t("auth.address_instructions") }}
        </span>
      </div>

      <q-input
        v-model="form.instructions"
        autogrow
        bg-color="surface"
        class="q-mt-sm q-mb-md"
        hide-bottom-space
        input-class="text-text"
        lazy-rules
        no-error-icon
        outlined
        rounded
        rows="3"
        type="textarea"
      />
    </div>

    <div>
      <div class="row q-gutter-sm q-mt-xs">
        <q-chip
          v-for="type in addressTypes"
          :key="type.value"
          :selected="form.address_type === type.value"
          clickable
          color="primary"
          text-color="surface"
          :icon="type.icon"
          :icon-selected="type.icon"
          :outline="form.address_type !== type.value"
          @click="form.address_type = type.value"
        >
          {{ $t(type.label) }}
        </q-chip>
      </div>
    </div>
  </q-card-section>
</template>

<script setup>
import axios from "axios";
import { ref } from "vue";

import { useInputRules } from "src/composables/useInputRules";

const form = defineModel({
  required: true,
  type: Object,
});

const { inputRules } = useInputRules();

const loadingCep = ref(false);

const addressTypes = [
  {
    icon: "mdi-home-outline",
    label: "auth.address_type_home",
    value: "home",
  },
  {
    icon: "mdi-briefcase-variant-outline",
    label: "auth.address_type_commercial",
    value: "commercial",
  },
  {
    icon: "mdi-map-marker-outline",
    label: "auth.address_type_other",
    value: "other",
  },
];

const fetchCep = async (rawCep) => {
  const cleaned = rawCep.replace(/\D/g, "");

  if (cleaned.length !== 8) {
    return;
  }

  loadingCep.value = true;

  try {
    const { data } = await axios.get(
      `https://viacep.com.br/ws/${cleaned}/json/`,
    );

    if (!data.erro) {
      form.value.address = data.logradouro ?? "";
      form.value.district = data.bairro ?? "";
      form.value.city = data.localidade ?? "";
      form.value.state = data.uf ?? "";
    } else {
      form.value.address = "";
      form.value.district = "";
      form.value.city = "";
      form.value.state = "";
    }
  } catch {
    form.value.address = "";
    form.value.district = "";
    form.value.city = "";
    form.value.state = "";
  } finally {
    loadingCep.value = false;
  }
};

const onCepChange = (val) => {
  const cleaned = val ? val.replace(/\D/g, "") : "";

  if (cleaned.length === 8) {
    fetchCep(val);
  } else {
    form.value.address = "";
    form.value.district = "";
    form.value.city = "";
    form.value.state = "";
  }
};
</script>
