<script>
import { storeToRefs } from "pinia";
import { defineComponent, onBeforeMount, ref, watch } from "vue";

import { fullCurrentDate } from "src/constants/date";
import { invertDate } from "src/functions/invertDate";
import { useFormStore } from "src/stores/forms";
import IconCalendar from "../icons/IconCalendar.vue";

export default defineComponent({
  name: "calendar-input",
  components: { IconCalendar },
  props: ["modelValue", "bindValue", "setValues", "dateCookies"],
  setup({ setValues, dateCookies, modelValue }, { emit }) {
    const formStore = useFormStore();
    const { availability, postalCodeValid } = storeToRefs(formStore);

    const [year, month, day] = fullCurrentDate.replaceAll("/", "-").split("-");
    const currentDate = `${day}-${month}-${year}`;
    const proxyDate = ref(invertDate(modelValue));
    function updateProxy() {
      proxyDate.value = invertDate(proxyDate.value);
    }

    function optionsValidDates(date) {
      return date >= fullCurrentDate;
    }

    function updateModel(value) {
      emit("update:modelValue", value);
    }

    onBeforeMount(() => {
      setValues({ date: invertDate(proxyDate.value) });
    });

    watch(proxyDate, (newProxy) => {
      setValues({ date: invertDate(newProxy) });
      const btn = document.querySelector(".buttons-close-modal button")
      if(btn) btn.click()
    });

    const LOCALE = {
      days: "Domingo_Lunes_Martes_Miércoles_Jueves_Viernes_Sábado".split("_"),
      daysShort: "Dom_Lun_Mar_Mié_Jue_Vie_Sáb".split("_"),
      months:
        "Enero_Febrero_Marzo_Abril_Mayo_Junio_Julio_Agosto_Septiembre_Octubre_Noviembre_Diciembre".split(
          "_"
        ),
      monthsShort: "Ene_Feb_Mar_Abr_May_Jun_Jul_Ago_Sep_Oct_Nov_Dic".split("_"),
      firstDayOfWeek: 1,
      format24h: false,
      pluralDay: "dias",
    };

    return {
      availability,
      postalCodeValid,
      proxyDate,
      LOCALE,
      updateProxy,
      optionsValidDates,
      updateModel,
    };
  },
});
</script>

<template>
  <div class="custom-input-el calendar">
    <q-btn round size="sm" class="custom-date-btn">
      <IconCalendar />

      <q-popup-proxy
        cover
        transition-show="scale"
        transition-hide="scale"
      >
        <q-date
          v-model="proxyDate"
          :options="postalCodeValid.dataOptions"
          :locale="LOCALE"
          :readonly="!postalCodeValid.isValid"
          mask="YYYY-MM-DD"
        >
          <div class="row items-center justify-end q-gutter-sm buttons-close-modal">
            <q-btn label="Cancel" color="primary" flat v-close-popup />
            <q-btn label="OK" color="primary" flat v-close-popup class="modal-close"/>
          </div>
        </q-date>
      </q-popup-proxy>
    </q-btn>

    <div class="custom-block-content">
      <p class="custom-head-paragraph">¿Cuándo?</p>

      <q-input
        :model-value="modelValue"
        @update:model-value="updateModel"
        v-bind="bindValue"
        class="custom-date-input"
        :error="false"
        placeholder="Elige una fecha"
        mask="##/##/####"
        borderless
        dense
        :disable="!postalCodeValid.isValid"
      />
    </div>
  </div>
</template>