<template>
  <v-input
    :error="!!validationErrMsg"
    :error-messages="validationErrMsg"
    hide-details="auto"
    :name="name + 'custom-input-date'"
    :disabled="props.disabled"
  >
    <template #default>
      <v-row>
        <v-col cols="12" lg="6" md="6">
          <v-select
            v-model="month"
            :items="props.months"
            label="Month"
            density="comfortable"
            :name="props.name + 'custom-input-date-month'"
            hide-details
            :error="!!validationErrMsg"
            :disabled="props.disabled"
          />
        </v-col>

        <v-col cols="12" lg="3" md="3">
          <v-text-field
            v-model.number="day"
            type="number"
            label="Day"
            hide-details
            placeholder="DD"
            density="comfortable"
            :name="props.name + 'custom-input-date-day'"
            :error="!!validationErrMsg"
            :disabled="props.disabled"
          />
        </v-col>

        <v-col cols="12" lg="3" md="3">
          <v-text-field
            v-model.number="year"
            type="number"
            label="Year"
            hide-details
            placeholder="YYYY"
            density="comfortable"
            :name="props.name + 'custom-input-date-year'"
            :error="!!validationErrMsg"
            :disabled="props.disabled"
          />
        </v-col>
      </v-row>
    </template>
  </v-input>
</template>

<script setup lang="ts">
const month = defineModel("month", { default: "" });
const day = defineModel("day", { default: 0 });
const year = defineModel("year", { default: 0 });

const props = defineProps({
  months: {
    type: Array,
    default: [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December",
    ],
  },
  name: {
    type: String,
    default: "input-date-combo",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const isLeapYear = (year: number): boolean =>
  (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;

const monthMap: Record<string, number> = {
  January: 1,
  February: 2,
  March: 3,
  April: 4,
  May: 5,
  June: 6,
  July: 7,
  August: 8,
  September: 9,
  October: 10,
  November: 11,
  December: 12,
};

const validateBirthDate = (): string => {
  const _month = monthMap[month.value];
  const _day = day.value;
  const _year = year.value;

  const errorMessage = "Enter a valid date";

  if (
    !_month ||
    !_day ||
    !_year ||
    _year < 1904 ||
    _year > new Date().getFullYear()
  ) {
    return errorMessage;
  }

  const daysInMonth = [
    31,
    isLeapYear(_year) ? 29 : 28,
    31,
    30,
    31,
    30,
    31,
    31,
    30,
    31,
    30,
    31,
  ];

  if (_day < 1 || _day > daysInMonth[_month - 1]) {
    return errorMessage;
  }

  if (!_month || !_day || !_year) {
    return errorMessage;
  }

  return "";
};

const validationErrMsg = ref("");

const date = computed(() => {
  return {
    day: day.value,
    month: month.value,
    year: year.value,
  };
});

validationErrMsg.value = validateBirthDate();

const disabled = computed(() => props.disabled);

watch(disabled, (curr) => {
  if (curr) {
    validationErrMsg.value = validateBirthDate();
  }
});

watch(
  date,
  () => {
    validationErrMsg.value = validateBirthDate();
  },
  { deep: true }
);
</script>
