<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <div style="width: 100%; max-width: 560px">
      <q-card class="dialog-form-card">
        <DefaultDialogHeader
          title="Justificar Registrar Presença"
          @close="onDialogCancel"
        />

        <DefaultForm @submit="onConfirm">
          <q-scroll-area class="dialog-form-scroll dialog-form-scroll--xs">
            <q-card-section class="q-pt-sm">
              <DefaultInput
                v-model="text"
                autofocus
                autogrow
                outlined
                bg-color="white"
                input-style="min-height: 110px"
                :placeholder="placeholder"
                type="textarea"
              >
                <template #append>
                  <q-icon
                    color="secondary"
                    name="mdi-pencil-outline"
                  />
                </template>
              </DefaultInput>
            </q-card-section>
          </q-scroll-area>

          <q-card-actions align="right" class="q-px-md q-pb-md">
            <q-btn
              color="primary"
              label="Cancelar"
              no-caps
              outline
              @click="onDialogCancel"
            />

            <q-btn
              color="primary"
              label="Justificar"
              no-caps
              type="submit"
              :disable="!text.trim()"
            />
          </q-card-actions>
        </DefaultForm>
      </q-card>
    </div>
  </q-dialog>
</template>

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

import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
import DefaultForm from "src/components/defaults/DefaultForm.vue";
import DefaultInput from "src/components/defaults/DefaultInput.vue";

defineEmits([...useDialogPluginComponent.emits]);

const props = defineProps({
  notes: { type: String, default: "" },
});

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
  useDialogPluginComponent();

const placeholder =
  "Ex: O(A) discente [Nome do Aluno] apresentou atestado médico (CID: [Opcional]) " +
  "justificando sua ausência na aula do dia [Data]. A falta foi abonada/justificada " +
  "conforme as normas da instituição, garantindo ao aluno o direito de [realizar " +
  "prova substitutiva / entrega de trabalho em nova data].";

const text = ref(props.notes ?? "");

const onConfirm = () => {
  onDialogOK(text.value.trim());
};
</script>