<template>
  <q-dialog ref="dialogRef" persistent @hide="onDialogHide">
    <q-card style="min-width: 340px">
      <q-card-section>
        <div class="text-h6">{{ $t('agendamento.definir_data_hora') }}</div>
      </q-card-section>

      <q-card-section>
        <q-form ref="formRef" class="q-gutter-sm">
          <DefaultInputDatePicker
            v-model:untreated-date="date"
            :label="$t('common.terms.date')"
            :rules="[inputRules.required]"
            placeholder="dd/mm/aaaa"
            lazy-rules
          />
          <DefaultInput
            v-model="time"
            :label="$t('common.terms.hour2')"
            :rules="[inputRules.required]"
            mask="##:##"
            placeholder="HH:MM"
          />
        </q-form>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn flat :label="$t('common.actions.cancel')" @click="onDialogCancel" />
        <q-btn color="positive" :label="$t('common.actions.confirm')" @click="onConfirm" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref, useTemplateRef } from "vue";
import { useDialogPluginComponent } from "quasar";
import { useInputRules } from "src/composables/useInputRules";
import DefaultInput from "src/components/defaults/DefaultInput.vue";
import DefaultInputDatePicker from "src/components/defaults/DefaultInputDatePicker.vue";

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

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

const formRef = useTemplateRef("formRef");
const date = ref("");
const time = ref("");

const onConfirm = async () => {
  const valid = await formRef.value?.validate();
  if (!valid) return;
  onDialogOK({ date: date.value, time: time.value });
};
</script>
