<template>
  <v-dialog v-model="menuChangeBirthday" width="900">
    <v-card>
      <v-card-item class="bg-primary py-3 elevation-6">
        <v-card-title>
          {{ $t("message.changeBirthday.title") }}
        </v-card-title>
      </v-card-item>
      <v-card-text
        class="font-weight-bold d-flex justify-center ga-3 text-h6 pt-5"
      >
        <v-menu
          v-model="menuBirthday"
          :close-on-content-click="false"
          transition="scale-transition"
          offset-y
          min-width="330px"
          max-width="290px"
        >
          <template v-slot:activator="{ props }">
            <v-text-field
              :model-value="formatBirthday()"
              :label="$t('message.changeBirthday.datePicker')"
              prepend-inner-icon="mdi-calendar"
              hide-details
              readonly
              variant="outlined"
              v-bind="props"
            ></v-text-field>
          </template>
          <v-date-picker
            hide-header
            show-adjacent-months
            rounded="lg"
            color="primary"
            v-model="birthday"
            @update:modelValue="menuBirthday = false"
          ></v-date-picker>
        </v-menu>
      </v-card-text>

      <v-card-actions class="px-7">
        <v-btn
          :text="$t('message.changeBirthday.close')"
          variant="text"
          class="text-error"
          @click="onCloseMenuChangeBirthday()"
        ></v-btn>
        <v-btn
          :text="$t('message.changeBirthday.save')"
          variant="text"
          class="text-primary"
          @click="onSaveChangeBirthday()"
        ></v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  name: "ChangeBirthdayDialog",
  data() {
    return {
      menuBirthday: false,
    };
  },
  computed: {
    menuChangeBirthday() {
      return this.$store.state.collection.menuChangeBirthday;
    },
    birthday: {
      get() {
        return this.$store.state.collection.birthday;
      },
      set(val) {
        this.$store.commit("setBirthday", val);
      },
    },
  },
  methods: {
    onCloseMenuChangeBirthday() {
      this.$store.commit("setMenuChangeBirthday", false);
    },
    formatBirthday() {
      if (!this.birthday) return null;

      return moment(this.birthday).format("DD-MM-YYYY");
    },
    onSaveChangeBirthday() {
      this.$store.commit("setMenuChangeBirthday", false);
    },
  },
};
</script>
