<template>
  <div class="VersionsSearchBar">
    <div class="VersionsSearchBar-SearchBlock">
      <div class="VersionsSearchBar-Title">Версии</div>
      <q-btn
        icon="pgs-filter"
        class="VersionsSearchBar-FilterIcon"
        @click="toggleFilter"
      >
        <q-badge
          floating
          v-if="!!filterCount"
          class="VersionsSearchBar-FilterCount"
        >
          {{ filterCount }}
        </q-badge>
      </q-btn>
    </div>
    <q-slide-transition>
      <q-card
        bordered
        flat
        v-show="filterVisible"
        class="VersionsSearchBar-Card"
      >
        <q-card-section>
          <div class="VersionsSearchBar-InputBlock">
            <r-date-input
              label="Дата изменения"
              :from.sync="filter.dateFrom"
              :to.sync="filter.dateTo"
            />

            <r-select
              v-model="filter.initiator"
              :options="initiators"
              emit-value
              label="Инициатор"
            />
            <!-- TODO: создать компонент q-select с инпутом -->
            <div>
              <span class="RSelect-Label"> Изменяемый атрибут </span>
              <q-select
                v-model="filter.diffPath"
                :options="filteredFrontLabels"
                filled
                emit-value
                map-options
                use-input
                input-debounce="0"
                dense
                options-dense
                borderless
                option-value="code"
                option-label="value"
                menu-anchor="bottom start"
                virtual-scroll-slice-size="10"
                dropdown-icon="pgs-shevron-down-off"
                @filter="filterFn"
              />
            </div>
          </div>
          <div class="VersionsSearchBar-AcceptBlock">
            <q-btn
              icon="pgs-search"
              class="VersionsSearchBar-AcceptBtn"
              label="Применить"
              :loading="loading"
              @click="executeSearch"
            />
          </div>
        </q-card-section>
        <q-btn
          dense
          flat
          class="VersionsSearchBar-CloseButton"
          icon="close"
          size="10px"
          @click="resetFilter"
          label="сбросить все"
        />
      </q-card>
    </q-slide-transition>
  </div>
</template>

<style lang="scss" scoped>
@import '@/recruits/assets/styles/mixins/search-bar.mixin.scss';

.VersionsSearchBar {
  @include SearchBar;
  border-bottom: 1px solid rgba(1, 72, 116, 0.11);
  padding-bottom: 10px;
  margin-bottom: 8px;

  &-SearchBlock {
    margin-bottom: 0;
  }
  &-Title {
    width: 100%;
    align-self: center;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.015em;
    color: rgba(2, 12, 18, 0.9);
  }
}
</style>

<script lang="ts">
import {
  Component,
  Emit,
  Prop,
  ModelSync,
  Vue,
  Watch,
} from 'vue-property-decorator';

import { SearchFilterUtils } from '@/recruits/utils/search-filter';
import RInput from '@/recruits/components/common/r-input.vue';
import RSelect from '@/recruits/components/common/r-select.vue';
import RDateInput from '@/recruits/components/common/r-date-input.vue';
import { VersionSearchFilter } from '@/recruits/components/recruit-card/versions/search-filter';
import { DictionariesElement } from '@/recruits/openapi/ervu-service';
import { JournalServiceApi } from '@/recruits/openapi/journal-service';
import { NsiServiceApi } from '@/recruits/openapi/nsi';

const NSI_SERVICE_API = new NsiServiceApi();
const JOURNAL_SERVICE_API = new JournalServiceApi();

@Component({
  components: {
    RDateInput,
    RSelect,
    RInput,
  },
})
export default class SearchBar extends Vue {
  @Prop({
    type: Boolean,
    default: false,
  })
  readonly loading: boolean;

  @ModelSync('data', 'change', { type: Object })
  filter: VersionSearchFilter;

  filterCount = 0;
  filterVisible = false;
  frontLabels: DictionariesElement[] = [];
  filteredFrontLabels: DictionariesElement[] = [];
  initiators: string[] = [];

  created(): void {
    NSI_SERVICE_API.getFrontLabelsV1('recruit').then(({ data }) => {
      this.filteredFrontLabels = data || [];
      this.frontLabels = data || [];
    });
    JOURNAL_SERVICE_API.getInitiatorsV1(this.$route.params.id).then(
      ({ data }) => {
        this.initiators = data;
      }
    );
  }

  filterFn(val: string, update: (arg0: { (): void; (): void }) => void): void {
    update(() => {
      this.filteredFrontLabels = this.frontLabels.filter((element) =>
        element.value?.toLowerCase().includes(val.toLowerCase())
      );
    });
  }

  toggleFilter(): void {
    this.filterVisible = !this.filterVisible;
  }

  resetFilter(): void {
    this.filter = new VersionSearchFilter();
  }

  @Watch('filter', { deep: true })
  private filterChange(filter: SearchFilterUtils) {
    this.filterCount = filter.countFilters();
  }

  @Emit('search')
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  executeSearch(): void {}
}
</script>
