<template>
  <div v-if="visible" id="dialogFeedFilters" class="dialog-overlay">
    <div class="dialog">
      <h1 class="text-xl font-bold text-center mb-4">Feed Filters</h1>

      <p class="mb-4 font-bold">Show only activities that…</p>

      <div class="grid grid-cols-1 gap-2">
        <div
          class="flex items-center justify-between cursor-pointer"
          @click="toggleHasVisibleDid()"
        >
          <!-- label -->
          <div>Include someone visible to me</div>
          <!-- toggle -->
          <div class="relative ml-2">
            <!-- input -->
            <input
              v-model="hasVisibleDid"
              type="checkbox"
              name="toggleFilterFromMyContacts"
              class="sr-only"
            />
            <!-- line -->
            <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
            <!-- dot -->
            <div
              class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
            ></div>
          </div>
        </div>

        <em>or</em>

        <div
          class="flex items-center justify-between cursor-pointer"
          @click="
            hasSearchBox
              ? toggleNearby()
              : $router.push({ name: 'search-area' })
          "
        >
          <!-- label -->
          <div>Are nearby</div>
          <!-- toggle -->
          <div v-if="hasSearchBox" class="relative ml-2">
            <!-- input -->
            <input
              v-model="isNearby"
              type="checkbox"
              name="toggleFilterNearby"
              class="sr-only"
            />
            <!-- line -->
            <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
            <!-- dot -->
            <div
              class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
            ></div>
          </div>
          <div v-else class="relative ml-2">
            <button class="ml-2 px-4 py-2 rounded-md bg-blue-200 text-blue-500">
              Select Location
            </button>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mt-4">
        <button
          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
          @click="setAll()"
        >
          Set All
        </button>
        <button
          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
          @click="clearAll()"
        >
          Clear All
        </button>
        <button
          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
          @click="done()"
        >
          Done
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-facing-decorator";
import {
  LMap,
  LMarker,
  LRectangle,
  LTileLayer,
} from "@vue-leaflet/vue-leaflet";
import { Router } from "vue-router";

import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
import { logger } from "@/utils/logger";

@Component({
  components: {
    LRectangle,
    LMap,
    LMarker,
    LTileLayer,
  },
  mixins: [PlatformServiceMixin],
})
export default class FeedFilters extends Vue {
  $router!: Router;
  onCloseIfChanged = () => {};
  hasSearchBox = false;
  hasVisibleDid = false;
  isNearby = false;
  settingChanged = false;
  visible = false;
  activeDid = "";

  async open(onCloseIfChanged: () => void, activeDid: string) {
    this.onCloseIfChanged = onCloseIfChanged;
    this.activeDid = activeDid;

    const settings = await this.$accountSettings(activeDid);
    this.hasVisibleDid = !!settings.filterFeedByVisible;
    this.isNearby = !!settings.filterFeedByNearby;
    if (settings.searchBoxes && settings.searchBoxes.length > 0) {
      this.hasSearchBox = true;
    }

    this.settingChanged = false;
    this.visible = true;
  }

  async toggleHasVisibleDid() {
    this.settingChanged = true;
    this.hasVisibleDid = !this.hasVisibleDid;

    await this.$updateSettings({
      filterFeedByVisible: this.hasVisibleDid,
    });
  }

  async toggleNearby() {
    this.settingChanged = true;
    this.isNearby = !this.isNearby;

    logger.debug("[FeedFilters] 🔄 Toggling nearby filter:", {
      newValue: this.isNearby,
      settingChanged: this.settingChanged,
      activeDid: this.activeDid,
    });

    await this.$updateSettings({
      filterFeedByNearby: this.isNearby,
    });

    logger.debug("[FeedFilters] ✅ Nearby filter updated in settings");
  }

  async clearAll() {
    if (this.hasVisibleDid || this.isNearby) {
      this.settingChanged = true;
    }

    await this.$updateSettings({
      filterFeedByNearby: false,
      filterFeedByVisible: false,
    });

    this.hasVisibleDid = false;
    this.isNearby = false;
  }

  async setAll() {
    if (!this.hasVisibleDid || !this.isNearby) {
      this.settingChanged = true;
    }

    await this.$updateSettings({
      filterFeedByNearby: true,
      filterFeedByVisible: true,
    });

    this.hasVisibleDid = true;
    this.isNearby = true;
  }

  close() {
    logger.debug("[FeedFilters] 🚪 Closing dialog:", {
      settingChanged: this.settingChanged,
      hasCallback: !!this.onCloseIfChanged,
    });

    if (this.settingChanged) {
      logger.debug("[FeedFilters] 🔄 Settings changed, calling callback");
      this.onCloseIfChanged();
    }
    this.visible = false;
  }

  done() {
    logger.debug("[FeedFilters] ✅ Done button clicked");
    this.close();
  }
}
</script>

<style scoped>
/* Component-specific styles if needed */
</style>
