<template>
  <div class="row q-col-gutter-md items-center">
    <div class="col-12 col-sm-6 col-md-3">
      <q-btn-group outline class="full-width">
        <q-btn
          v-for="option in periodOptions"
          :key="option.value"
          :outline="selectedPeriod != option.value"
          :label="option.label"
          color="primary"
          class="full-width"
          @click="selectedPeriod = option.value"
        />
      </q-btn-group>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const selectedPeriod = defineModel("selectedPeriod", {
  type: String,
  default: "month",
});

const selectedEventId = defineModel("selectedEventId", {
  type: Number,
});

const selectedEvent = ref(null);

watch(selectedEvent, () => {
  selectedEventId.value = selectedEvent.value?.value;
});

const periodOptions = [
  { label: t("common.terms.day"), value: "day" },
  { label: t("common.terms.week"), value: "week" },
  { label: t("common.terms.month"), value: "month" },
  { label: t("common.terms.year"), value: "year" },
  { label: t("common.terms.all"), value: "all" },
];
</script>
