<template>
  <q-dialog v-model="dialogModel" persistent>
    <q-card style="width: 900px; max-width: 95vw; border-radius: 8px">
      <DefaultDialogHeader title="Editar meus dados" @close="closeDialog" />

      <q-form
        ref="editFormRef"
        class="column q-gutter-sm q-pa-md bg-grey-2"
        @submit="submitForm"
      >
        <div
          class="bg-white radius-8 q-pa-sm q-mb-xl"
          style="border: 1px solid #ccc"
        >
          <div class="column q-gutter-sm" style="border-radius: 8px">
            <div class="text-subtitle2 text-weight-bold text-primary">
              Dados pessoais
            </div>

            <q-separator />

            <div class="grid-2">
              <q-input
                v-model="form.name"
                bg-color="white"
                label="Nome"
                outlined
                :error="Boolean(serverErrors.name)"
                :error-message="serverErrors.name"
                :loading="submitting"
                :rules="[inputRules.required]"
              />

              <q-input
                v-model="form.document"
                bg-color="white"
                label="Número de documento"
                outlined
                :error="Boolean(serverErrors.document_number)"
                :error-message="serverErrors.document_number"
                :loading="submitting"
              />
            </div>
          </div>

          <div class="column q-gutter-sm" style="border-radius: 8px">
            <div class="text-subtitle2 text-weight-bold text-primary">
              Acesso
            </div>

            <q-separator />

            <div class="grid-3">
              <q-input
                v-model="form.email"
                bg-color="white"
                label="Email"
                outlined
                :error="Boolean(serverErrors.email)"
                :error-message="serverErrors.email"
                :loading="submitting"
                :rules="[inputRules.required, inputRules.email]"
              />

              <DefaultPasswordInput
                v-model="form.password"
                bg-color="white"
                label="Senha"
                outlined
                :error="Boolean(serverErrors.password)"
                :error-message="serverErrors.password"
                :loading="submitting"
                :rules="passwordRules"
              />

              <DefaultPasswordInput
                v-model="form.confirmPassword"
                bg-color="white"
                label="Confirmar Senha"
                outlined
                :loading="submitting"
                :rules="confirmPasswordRules"
              />
            </div>
          </div>
        </div>

        <div class="row justify-end q-gutter-sm">
          <q-btn
            class="bg-white"
            color="primary"
            label="Cancelar"
            outline
            @click="closeDialog"
          />

          <q-btn
            color="primary"
            label="Salvar"
            type="submit"
            :loading="submitting"
          />
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</template>

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

import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
import DefaultPasswordInput from "src/components/defaults/DefaultPasswordInput.vue";

const dialogModel = defineModel({ default: false });

const form = defineModel("form", {
  default: () => ({
    name: "",
    document: "",
    email: "",
    password: "",
    confirmPassword: "",
  }),
});

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

const props = defineProps({
  // eslint-disable-next-line vue/require-default-prop
  inputRules: Object,
  serverErrors: {
    type: Object,
    default: () => ({}),
  },
  submitting: Boolean,
});

const editFormRef = ref(null);

const passwordRules = computed(() =>
  form.value.password ? [props.inputRules.min(6)] : [],
);

const confirmPasswordRules = computed(() =>
  form.value.password
    ? [
        props.inputRules.required,
        props.inputRules.samePassword(form.value.password),
      ]
    : [],
);

const closeDialog = () => {
  dialogModel.value = false;
  emit("close");
};

const submitForm = async () => {
  const isValid = await editFormRef.value?.validate();
  if (!isValid) return;

  emit("submit", form.value);
};
</script>

<style scoped>
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 12px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 900px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}
</style>
