<template>
  <section class="filter-card" v-click-outside="closeCard" @keydown.esc="closeCard">
    <div class="card_controls">
      <button class="card-button btn--filled btn--image" @click="toggleCard">
        <img class="button_icon" src="/images/icon-filter2.svg" alt="filter icon" />
        <p>[F] {{ $t('options.filters') }}</p>
        <span class="active-indicator" v-if="changedFilters.length != 0"></span>
      </button>
    </div>

    <transition name="card-anim">
      <div class="card" v-if="isVisible" ref="cardRef" @keydown.r="resetFilters">
        <div class="card_content" tabindex="0" @scroll="onScroll" ref="cardContentRef">
          <div class="card_title flex">{{ $t('filters.title') }}</div>
          <p class="card_info" v-html="$t('filters.desc')"></p>

          <div class="changed-filters" :data-active="changedFilters.length > 0">
            <template v-if="changedFilters.length > 0">
              {{ $t('filters.changed-filters-count') }} <b>{{ changedFilters.length }}</b>
            </template>
            <template v-else>{{ $t('filters.no-changed-filters') }}</template>
          </div>

          <section class="card_input-search">
            <datalist id="sceneries">
              <option
                v-for="scenery in sortedStationList"
                :key="scenery.name"
                :value="scenery.name"
              ></option>
            </datalist>

            <input
              v-model="chosenSearchScenery"
              id="scenery-search"
              list="sceneries"
              :placeholder="$t('filters.sceneries-placeholder')"
              @change="handleSceneriesInput"
              @focus="preventKeyDown = true"
              @blur="preventKeyDown = false"
            />

            <button class="btn--action" @click="handleSceneriesInput">
              {{ $t('filters.search-button-title') }}
            </button>
          </section>

          <section class="card_input-search">
            <input
              v-model="filters['lines']"
              id="line-numbers-search"
              :placeholder="$t('filters.line-numbers-placeholder')"
              @focus="preventKeyDown = true"
              @blur="preventKeyDown = false"
            />

            <button class="btn--action btn--image" @click="resetLineNumbersInput">
              <img src="/images/icon-exit.svg" alt="reset line numbers search" />
            </button>
          </section>

          <section class="card_input-search">
            <select id="author" name="authors" v-model="filters['authors']">
              <option value="">{{ $t('filters.authors-placeholder') }}</option>
              <option v-for="(author, i) in authorsOptions" :key="i" :value="author">
                {{ author }}
              </option>
            </select>

            <button class="btn--action btn--image" @click="resetAuthorsInput">
              <img src="/images/icon-exit.svg" alt="reset authors search" />
            </button>
          </section>

          <section class="card_input-search">
            <select id="projects" name="projects" v-model="filters['projects']">
              <option value="">{{ $t('filters.projects-placeholder') }}</option>
              <option v-for="(project, i) in projectsOptions" :key="i" :value="project">
                {{ project }}
              </option>
            </select>

            <button class="btn--action btn--image" @click="resetProjectsInput">
              <img src="/images/icon-exit.svg" alt="reset projects search" />
            </button>
          </section>

          <section class="card_options">
            <div
              class="option-section"
              v-for="(sectionFilters, sectionKey) in filtersSections"
              :key="sectionKey"
            >
              <h3 class="section-header">
                <span class="active-indicator" v-if="!areSectionFiltersDefault(sectionKey)"></span>
                {{ $t(`filters.sections.${sectionKey}`) }}
                <button @click="resetSectionFilters(sectionKey)">RESET</button>
              </h3>

              <hr />

              <div class="section-filters">
                <label
                  v-for="filterKey in sectionFilters"
                  @dblclick="setSingleSectionFilter(sectionKey, filterKey)"
                >
                  <input
                    type="checkbox"
                    :checked="filters[filterKey]"
                    v-model="filters[filterKey]"
                    :class="sectionKey"
                    :name="filterKey"
                    :id="filterKey"
                  />
                  <span>
                    {{ $t(`filters.${filterKey}`) }}
                  </span>
                </label>
              </div>
            </div>
          </section>

          <section class="card_timestamp">
            <h3 class="hours-section-header">{{ $t('filters.minimum-hours-title') }}</h3>

            <span class="clock">
              <button class="btn--action" @click="subHour">-</button>
              <span>{{
                minimumHours == 0
                  ? $t('filters.now')
                  : minimumHours < 7
                    ? minimumHours + $t('filters.hour')
                    : $t('filters.no-limit')
              }}</span>
              <button class="btn--action" @click="addHour">+</button>
            </span>
          </section>

          <section class="card_sliders">
            <div class="option-slider" v-for="(sliderGroup, i) in sliderGroups" :key="i">
              <FilterSlider :sliderGroup="sliderGroup" />

              <span class="slider-value">
                {{ filters[sliderGroupsOptions[sliderGroup][0].id] }} -
                {{ filters[sliderGroupsOptions[sliderGroup][1].id] }}
              </span>

              <div class="slider-content">
                {{ $t(`filters.sliders.${sliderGroups[i]}`) }}
              </div>
            </div>
          </section>
        </div>

        <section class="card_actions">
          <div class="action-buttons">
            <button
              class="btn--action"
              style="width: 100%"
              @click="saveFilters"
              :data-selected="saveOptions"
            >
              {{ $t('filters.save') }}
            </button>

            <button
              class="btn--action"
              :disabled="changedFilters.length == 0"
              :data-disabled="changedFilters.length == 0"
              @click="resetFilters"
            >
              [R] {{ $t('filters.reset') }}
            </button>
            <button class="btn--action" @click="closeCard">{{ $t('filters.close') }}</button>
          </div>
        </section>
      </div>
    </transition>
  </section>
</template>

<script lang="ts">
import { defineComponent, inject } from 'vue';
import keyMixin from '../../mixins/keyMixin';
import routerMixin from '../../mixins/routerMixin';
import { useMainStore } from '../../store/mainStore';

import FilterOption from './FilterOption.vue';
import FilterSlider from './FilterSlider.vue';
import StorageManager from '../../managers/storageManager';

import {
  filtersSections,
  initFilters,
  sliderGroups,
  getChangedFilters,
  sliderGroupsOptions
} from '../../managers/stationFilterManager';

import { StationFilterSection } from '../../managers/stationFilterManager';
import { computed } from 'vue';
import { watch } from 'vue';

const STORAGE_KEY = 'options_saved';

export default defineComponent({
  components: { FilterOption, FilterSlider },
  mixins: [keyMixin, routerMixin],

  data: () => ({
    saveOptions: false,

    filtersSections,
    sliderGroups,
    sliderGroupsOptions,

    minimumHours: 0,

    currentRegion: { id: '', value: '' },

    delayInputTimer: -1,
    chosenSearchScenery: '',

    scrollTop: 0,
    lastFocusedEl: null as HTMLElement | null
  }),

  setup() {
    const isVisible = inject('isFilterCardVisible');
    const store = useMainStore();

    const filters = inject('StationsView_filters') as Record<string, any>;

    const changedFilters = computed(() => getChangedFilters(filters));

    // Save filters to persistent storage
    watch(filters, (value) => {
      if (!StorageManager.isRegistered(STORAGE_KEY)) return;

      Object.keys(value).forEach((filterKey) => {
        StorageManager.setValue(filterKey, filters[filterKey]);
      });
    });

    return {
      isVisible,
      store,
      filters,
      changedFilters
    };
  },

  mounted() {
    this.saveOptions = StorageManager.isRegistered(STORAGE_KEY);

    if (StorageManager.isRegistered('onlineFromHours') && this.saveOptions) {
      this.minimumHours = StorageManager.getNumericValue('onlineFromHours');
    }

    this.currentRegion = this.store.region;
  },

  computed: {
    sortedStationList() {
      return this.store.stationList
        .filter((s) =>
          s.name.toLocaleLowerCase().includes(this.chosenSearchScenery.toLocaleLowerCase())
        )
        .sort((s1, s2) => (s1.name > s2.name ? 1 : -1));
    },

    authorsOptions() {
      return this.store.stationList
        .reduce((acc, station) => {
          if (station.generalInfo?.hidden === true) return acc;

          station.generalInfo?.authors?.forEach((author) => {
            if (author.trim() != '' && !acc.includes(author.toLocaleLowerCase()))
              acc.push(author.toLocaleLowerCase());
          });

          return acc;
        }, [] as string[])
        .sort((a, b) => a.localeCompare(b));
    },

    projectsOptions() {
      return this.store.stationList
        .reduce((acc, station) => {
          if (!station.generalInfo || !station.generalInfo.project || station.generalInfo.hidden)
            return acc;
          if (!acc.includes(station.generalInfo.project.trim()))
            acc.push(station.generalInfo.project.trim());

          return acc;
        }, [] as string[])
        .sort((a, b) => a.localeCompare(b));
    }
  },

  watch: {
    isVisible(value: boolean) {
      this.$nextTick(() => {
        if (value) {
          (this.$refs['cardContentRef'] as HTMLDivElement).scrollTop = this.scrollTop;
          (this.$refs['cardContentRef'] as HTMLDivElement).focus();
        }
      });
    }
  },

  methods: {
    // Override keyMixin function
    onKeyDownFunction() {
      this.isVisible = !this.isVisible;
    },

    onScroll(e: Event) {
      this.scrollTop = (e.target as HTMLElement).scrollTop;
    },

    resetAuthorsInput() {
      this.filters['authors'] = '';
    },

    resetProjectsInput() {
      this.filters['projects'] = '';
    },

    resetLineNumbersInput() {
      this.filters['lines'] = '';
    },

    handleSceneriesInput() {
      const chosenStation = this.store.stationList.find(
        ({ name }) => name == this.chosenSearchScenery
      );

      if (chosenStation) {
        this.$router.push(`/scenery?station=${chosenStation.name.replace(/ /g, '_')}`);
        this.chosenSearchScenery = '';
        this.isVisible = false;
      }
    },

    subHour() {
      this.minimumHours = this.minimumHours < 1 ? 7 : this.minimumHours - 1;
      this.filters['onlineFromHours'] = this.minimumHours;
    },

    addHour() {
      this.minimumHours = this.minimumHours > 6 ? 0 : this.minimumHours + 1;
      this.filters['onlineFromHours'] = this.minimumHours;
    },

    saveFilters() {
      this.saveOptions = !this.saveOptions;

      if (!this.saveOptions) {
        StorageManager.unregisterStorage(STORAGE_KEY);
        return;
      }

      StorageManager.registerStorage(STORAGE_KEY);

      Object.keys(this.filters).forEach((filterKey) => {
        StorageManager.setValue(filterKey, this.filters[filterKey]);
      });
    },

    resetFilters() {
      if (this.preventKeyDown) return;

      // Reset local model values
      this.minimumHours = 0;

      // Reset global filters
      Object.keys(this.filters).forEach((filterKey) => {
        this.filters[filterKey] = (initFilters as any)[filterKey];
      });
    },

    areSectionFiltersDefault(sectionKey: StationFilterSection) {
      return filtersSections[sectionKey].every((filterKey) => {
        return this.filters[filterKey] == initFilters[filterKey];
      });
    },

    resetSectionFilters(sectionKey: StationFilterSection) {
      filtersSections[sectionKey].forEach((filterKey) => {
        this.filters[filterKey] = initFilters[filterKey];
      });
    },

    setSingleSectionFilter(sectionKey: StationFilterSection, chosenKey: string) {
      filtersSections[sectionKey].forEach((filterKey) => {
        if (typeof this.filters[filterKey] === 'boolean')
          this.filters[filterKey] = filterKey != chosenKey;
      });
    },

    closeCard() {
      this.isVisible = false;
    },

    toggleCard() {
      this.isVisible = !this.isVisible;
    }
  }
});
</script>

<style lang="scss" scoped>
@use '../../styles/responsive';
@use '../../styles/card';
@use '../../styles/animations';

h3.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.25em;
  gap: 0.5em;
  color: var(--clr-primary);
}

h3.hours-section-header {
  text-align: center;
  margin: 0.5em 0;
}

.card {
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 1px;
}

.card_info {
  background-color: #111;
  padding: 0.5em;
}

.changed-filters {
  background-color: #111;
  padding: 0.5em;

  &[data-active='true'] {
    color: lightgreen;
  }
}

.card_controls {
  display: flex;
  gap: 0.5em;
}

.card_content {
  padding: 1em 0.5em;

  display: flex;
  flex-direction: column;

  gap: 1em;
  overflow: auto;
}

.card_title {
  font-size: 2em;
  font-weight: 700;
  color: var(--clr-primary);

  text-align: center;
}

.card_timestamp {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .clock {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.2em;
    text-align: center;

    span {
      min-width: 120px;
      font-weight: bold;
      color: var(--clr-primary);
    }

    button {
      padding: 0.2em 0.6em;
    }
  }
}

.card_input-search {
  display: flex;
  align-items: center;
  gap: 0.5em;

  button {
    height: 100%;
  }

  input,
  select {
    width: 100%;
    padding: 0.5em;
    border: 1px solid #aaa;
  }
}

.section-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.5em;
  margin: 1em 0;
}

.section-filters > label {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;

  span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    cursor: pointer;
    text-align: center;
    padding: 0.25em;
    font-weight: bold;
    background-color: forestgreen;
  }

  span:hover {
    background-color: #22aa22;
  }

  input[type='checkbox'] {
    cursor: pointer;
    position: absolute;
    opacity: 0;

    &:checked + span {
      background-color: #444;

      &:hover {
        background-color: #555;
      }
    }

    &:focus-visible + span {
      outline: 1px solid var(--clr-primary);
    }
  }
}

.card_actions {
  padding: 0.5em;

  .action-buttons {
    display: flex;
    gap: 0.5em;

    margin-top: 0.5em;

    button {
      width: 100%;
      margin: 0 auto;
      padding: 0.5em;

      &[data-selected='true'] {
        background-color: forestgreen;
      }
    }
  }
}

.option-section h3 {
  button {
    padding: 0.15em;
    color: coral;
  }
}

.card_sliders {
  margin-top: 1em;
}

.option-slider {
  display: grid;
  align-items: center;
  grid-template-columns: 250px 100px 1fr;
  gap: 0.25em;
  min-height: 35px;

  margin-bottom: 1em;
}

.slider-value {
  color: var(--clr-primary);
  padding: 0.1em 0.2em;
  text-align: center;
  font-weight: bold;
}

@include responsive.smallScreen {
  .option-slider {
    grid-template-columns: 1fr;
  }

  .slider-content {
    text-align: center;
  }

  .card_controls > button > p {
    display: none;
  }
}
</style>
