<!-- 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 flat round dense icon="mdi-close" color="grey-6" @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="row q-gutter-x-lg">
            <q-radio
              v-for="opt in group.options"
              :key="opt.value"
              v-model="localSort"
              :val="opt.value"
              :label="opt.label"
              :disable="opt.disable ?? false"
              color="primary"
              keep-color
              class="font12 fontmedium"
              dense
            />
          </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"
          :label="$t('search_filter.availability_placeholder')"
          dense
          class="date-picker-primary"
        />
      </q-card-section>

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

    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useDialogPluginComponent } from 'quasar';
import { useI18n } from 'vue-i18n';
import DefaultInputDatePicker from 'src/components/defaults/DefaultInputDatePicker.vue';

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

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

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

const localSort = ref(initialSort ?? null);
const localDate = ref(initialDate ?? 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 clearFilters = () => {
  localSort.value = null;
  localDate.value = null;
  onDialogOK({ sort: null, date: null });
};

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

<style scoped lang="scss">
.filter-card {
  border-radius: 16px;
  width: min(92vw, 420px);
}
.filter-body {
  max-height: 60dvh;
  overflow-y: auto;
}
.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">
.q-popup-proxy {
  .q-date {
    background: var(--q-surface, #ffffff) !important;
    color: var(--q-text, #555555) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);

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

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

    .q-date__calendar-item .q-btn {
      color: var(--q-text, #555555) !important;
    }

    .q-date__navigation .q-btn {
      color: var(--q-text, #555555) !important;
    }

    .q-date__calendar-weekdays > div {
      color: var(--q-text, #555555) !important;
      opacity: 0.6;
    }
  }
}
</style>