<template>
  <div class="q-gutter-y-md">
    <q-input
      v-model="filter.search"
      dense
      filled
      debounce="1000"
      placeholder="Введите название уведомления"
      @input="handleSearchChange"
      @keydown.enter="handleSearchChange"
      @keydown.esc="filter.search = ''"
    >
      <template #prepend>
        <q-icon name="search" />
      </template>
    </q-input>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { SearchBarRefs } from '@/components/common/base-search-bar';
import { NotificationsSearchQuery } from '@components/notifications/index';
import omit from 'lodash/omit';

export interface Option {
  label?: string;
  value?: string;
}

@Component({})
export default class NotificationsSearchBar extends Vue {
  $refs!: SearchBarRefs;

  @Prop({
    required: true,
  })
  query!: NotificationsSearchQuery;

  @Watch('query', { deep: true })
  queryHandler(query: NotificationsSearchQuery): void {
    this.parseQueryParams(query);
  }

  handleStatusChange(): void {
    const RESult = this.filter.status.map((el) => el.value);
    const status = RESult.join() || undefined;

    const queryParams = this.resetPagination();

    this.$router.push({ query: { ...queryParams, status } });

    this.startSearch();
  }

  handleSearchChange(): void {
    const search = this.filter.search || undefined;
    const queryParams = this.resetPagination();

    this.$router.push({ query: { ...queryParams, search } });
    this.startSearch();
  }

  protected get selectedStatus(): string {
    return this.filter.status.length
      ? this.filter.status.map((e) => e.label).join(', ')
      : '';
  }

  protected toggleFilter(): void {
    this.filter.visible = !this.filter.visible;
  }

  protected saveData(): void {
    this.$emit('save-data');
  }

  protected RESetFilter(): void {
    this.filter.search = '';
    this.filter.status = [];
    this.filter.visible = false;
    this.startSearch();
  }

  protected get filterCount(): number {
    let RESult = 0;

    if (this.filter.status.length) {
      RESult++;
    }

    return RESult;
  }

  protected filter: Filter = {
    search: '',
    status: [],
    visible: false,
  };

  protected startSearch(): void {
    const fulltext: string[] = [];
    const { status, search } = this.filter;

    if (search) {
      fulltext.push(`title=searchprefix="${search}"`);
    }
    if (status.length) {
      let statusesArr: Array<string> = [];

      for (const val of status) {
        if (val.value && val.value.includes(',')) {
          const temp = val.value.split(',');
          statusesArr = statusesArr.concat(temp);
        } else {
          statusesArr.push(val.value ?? '');
        }
      }
    }

    const qObj = fulltext.join(' or ');

    this.$emit('query', qObj);
  }

  parseQueryParams(query: NotificationsSearchQuery): void {
    const { search } = query;

    if (search) {
      this.filter.search = search;
    }
  }

  protected resetPagination() {
    this.$emit('pagination');
    return omit(this.$route.query, 'page');
  }

  protected async created(): Promise<void> {
    if (this.query) {
      this.parseQueryParams(this.query);
      this.startSearch();
    }
  }
}

export interface Filter {
  search: string;
  status: Option[];
  visible: boolean;
}
</script>
