<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
<template>
  <q-dialog
    ref="dialogRef"
    position="standard"
    @hide="onDialogHide"
  >
    <q-card class="filter-card bg-surface text-text">
      <q-card-section class="row items-center q-pb-none">
        <span class="font16 fontbold gradient-diarista">{{
          $t("search_filter.title")
        }}</span>

        <q-space />

        <q-btn
          color="grey-6"
          dense
          flat
          icon="mdi-close"
          round
          @click="onDialogCancel"
        />
      </q-card-section>

      <q-separator class="q-mt-sm" />

      <q-card-section class="q-pt-sm q-pb-none scroll filter-body">
        <div class="font14 fontbold text-grey-7 q-mb-sm">
          {{ $t("search_filter.sort_by") }}
        </div>

        <div
          v-for="group in sortGroups"
          :key="group.key"
          class="q-mb-md"
        >
          <div class="font12 fontmedium text-text q-mb-xs">
            {{ group.label }}
          </div>

          <div class="sort-options">
            <q-radio
              v-for="opt in group.options"
              :key="opt.value"
              v-model="localSort"
              :disable="opt.disable ?? false"
              :label="opt.label"
              :val="opt.value"
              class="sort-option font12 fontmedium"
              color="primary"
              dense
              keep-color
            />
          </div>
        </div>

        <q-separator class="q-my-sm" />

        <div class="font12 fontbold text-grey-7 q-mb-xs">
          {{ $t("search_filter.filter_by") }}
        </div>

        <div class="font12 fontmedium text-text q-mb-xs">
          {{ $t("search_filter.availability") }}
        </div>

        <DefaultInputDatePicker
          v-model:untreated-date="localDate"
          calendar-class="search-filter-calendar"
          class="date-picker-primary"
          dense
          :label="$t('search_filter.availability_placeholder')"
        />
      </q-card-section>

      <q-separator />

      <q-card-actions class="q-px-md q-py-md row q-gutter-x-sm">
        <q-btn
          class="col"
          color="grey-6"
          no-caps
          outline
          rounded
          size="md"
          :label="$t('search_filter.clear')"
          @click="clearFilters"
        />

        <q-btn
          class="col"
          color="primary-button"
          no-caps
          rounded
          size="md"
          unelevated
          :label="$t('search_filter.apply')"
          @click="applyFilters"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

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

import DefaultInputDatePicker from "src/components/defaults/DefaultInputDatePicker.vue";

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

const { initialDate, initialSort } = defineProps({
  initialDate: { default: null, type: String },
  initialSort: { default: null, type: String },
});

const { dialogRef, onDialogCancel, onDialogHide, onDialogOK } =
  useDialogPluginComponent();
const { t } = useI18n();

const localDate = ref(initialDate ?? null);
const localSort = ref(initialSort ?? null);

const sortGroups = computed(() => [
  {
    key: "price",
    label: t("search_filter.groups.price"),
    options: [
      { value: "price_desc", label: t("search_filter.sort.higher") },
      { value: "price_asc", label: t("search_filter.sort.lower") },
    ],
  },
  {
    key: "distance",
    label: t("search_filter.groups.distance"),
    options: [
      {
        value: "distance_desc",
        label: t("search_filter.sort.higher"),
        disable: true,
      },
      {
        value: "distance_asc",
        label: t("search_filter.sort.lower"),
        disable: true,
      },
    ],
  },
  {
    key: "reviews",
    label: t("search_filter.groups.reviews"),
    options: [
      { value: "reviews_desc", label: t("search_filter.sort.higher") },
      { value: "reviews_asc", label: t("search_filter.sort.lower") },
    ],
  },
  {
    key: "rating",
    label: t("search_filter.groups.rating"),
    options: [
      { value: "rating_desc", label: t("search_filter.sort.higher") },
      { value: "rating_asc", label: t("search_filter.sort.lower") },
    ],
  },
  {
    key: "services",
    label: t("search_filter.groups.services"),
    options: [
      { value: "services_desc", label: t("search_filter.sort.higher") },
      { value: "services_asc", label: t("search_filter.sort.lower") },
    ],
  },
  {
    key: "oldest",
    label: t("search_filter.groups.oldest"),
    options: [
      { value: "oldest", label: t("search_filter.sort.oldest_asc") },
      { value: "newest", label: t("search_filter.sort.oldest_desc") },
    ],
  },
]);

const applyFilters = () => {
  onDialogOK({ sort: localSort.value, date: localDate.value });
};

const clearFilters = () => {
  localDate.value = null;
  localSort.value = null;
  onDialogOK({ date: null, sort: null });
};
</script>

<style scoped lang="scss">
.filter-card {
  border-radius: 16px;
  width: min(92vw, 420px);
}

.filter-body {
  max-height: 60dvh;
  overflow-y: auto;
}

.sort-options {
  column-gap: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sort-option {
  width: 100%;
}

.date-picker-primary {
  :deep(.q-field__label) {
    color: var(--q-primary);
  }

  :deep(.q-field__native),
  :deep(.q-field__input) {
    color: var(--q-text, #555555) !important;
  }

  :deep(.q-icon) {
    color: var(--q-primary);
  }
}
</style>

<style lang="scss">
.search-filter-calendar {
  background: #fff !important;
  color: #555 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);

  .q-date__header {
    background: var(--q-primary);
    color: #fff;
  }

  .q-date__content,
  .q-date__navigation .q-btn,
  .q-date__navigation .q-btn__content,
  .q-date__calendar-weekdays > div {
    color: #555 !important;
  }

  .q-date__calendar-days .q-btn:not(.bg-primary),
  .q-date__calendar-days .q-btn:not(.bg-primary) .q-btn__content {
    color: #555 !important;
  }

  .q-date__calendar-weekdays > div {
    opacity: 0.6;
  }
}
</style>
