<template lang="html">
    <div class="anime-table">
      <div class="table-header-menu">

        <div class="filtr-state-selector">
          <svg width="32" height="32" fill="currentColor" style="margin-right: 16px;">
            <use xlink:href="#ico-funnel"></use>
          </svg>

          <!--Filtr statusu-->
          <select class="sl-default" @change="GetAnimeSort()" v-model="filterTable">
            <option value="-1">Wszystkie</option>
            <option value="0">Nie obejżane</option>
            <option value="1">Oglądane</option>
            <option value="2">Obejżane</option>
            <option value="3">Pożucone</option>
          </select>

          <!--Filtr grupy-->
          <select class="sl-default" style="margin-left: 16px;" v-model="groupTable" @change="GetAnimeSort()">
            <option value="0">Full DB</option>
            <option v-for="(content, index) in rawGroup" :key="index" :value="content.gr_id">{{ content.gr_title }}</option>
          </select>
        </div>

        <!--Wyszukiwarka-->
        <div class="search-input">
          <input type="text" class="in in-default" placeholder="Search..." aria-label="Search..." aria-describedby="basic-addon2" style="width: 85%;" v-model="searchString" @change="SearchRecord">
            <button class="bt-circle bt-normal" type="button" style="width: 40px; height: 40px;" @click="SearchRecord">
              <svg width="16" height="16" fill="currentColor" class="bi bi-database-fill-add">
                <use xlink:href="#ico-search"/>
              </svg>
            </button>
        </div>
      </div>

      <table class="table table-dark">
        <thead>
          <tr>
            <th scope="col" class="ch-column">#</th>
            <th scope="col" class="img-column">img</th>
            <th scope="col" class="title-column">Tytuł</th>
            <th scope="col" class="ep-column">Odcinki</th>
          </tr>
        </thead>

        <!--Główna tabela-->
        <tbody>
          <template v-if="animeTableContent">
            <DataRow v-for="(content, index) in rawAnime" :key="index" :data="content" />
          </template>
        </tbody>
      </table>
    </div>
</template>
<script>
import { useAnimeStore } from '@/stores/anime';
import { useAuterizationStore } from '@/stores/auterization';
import { useModeratedStore } from '@/stores/moderated';

import { ref } from 'vue';
import { nextTick } from 'vue';

import DataRow from './row.vue';

export default {
    name: 'DataTable',
    components: {
      DataRow,
    },
    data() {
      return{
        animeData: [],
        animeTableContent: true,
        rawGroup: [],
        rawAnime: [],

        animeStorage: [],
        groupStorage: [],

        filterTable: -1,
        groupTable: 0,

        searchString: "",
      }
    },

    inject: ['setReloadTable'],

    setup() {
      const animeStore = useAnimeStore();
      const auterization = useAuterizationStore();
      const moderated = useModeratedStore();

      const isLogged = ref(auterization.isLogged);
      const userPreference = ref(auterization.userPreference);

      //const animeData = ref([]);

      return {
        GetAnime: animeStore.GetAnime,
        GetFilteringData: animeStore.GetFilteringData,
        GetSearchData: animeStore.GetSearchData,
        GetAnimeContent: animeStore.GetAnimeContent,

        isLogged,
        userPreference,
        //animeData,

        UpdateUserPref: auterization.UpdateUserPref,

        ResetIndex: moderated.ResetIndex,
      }
    },

    mounted() {
      //Filer
      if(this.userPreference?.filter) {
        this.filterTable = this.userPreference.filter;
      }
      else {
        this.filterTable = -1;
      }


      if(this.isLogged) {
        this.LoadData();
      }
      else {
        console.error('Nie jesteś zalogowany! Brak danych do załadowania');
        this.$router.push('/login');
      }

      this.setReloadTable(this.ReloadData);
    },

    methods: {
      async LoadData(){
        const data = await this.GetAnime(this.filterTable);
        if (data) {
          this.rawAnime = data.anime;
          this.rawGroup = data.group;
          console.log(this.rawGroup);
          //this.animeData = this.SerializedData(this.rawGroup, this.rawAnime);
        }
      },

      //Przeładowuje dane
      async ReloadData() {
        this.animeTableContent = false;
        this.ResetIndex();
        await this.LoadData();
        this.animeTableContent = true;
      },

      //Pobierz posortowaną listę na postawie
      async GetAnimeSort() {
        this.animeTableContent = false;
        const sort = { 
          "group": this.groupTable,
          "status": this.filterTable,
         };

         console.log(sort);

        this.rawAnime = await this.GetAnimeContent(sort);
        this.animeTableContent = true;
      },

      //Zmiana wyświetlania kontentu
      //Dopasowywanie statusu oglądania do filtra
      async ChangeFiltr() {
        this.animeTableContent = false;
        const data = {filter: this.filterTable};
        await this.UpdateUserPref(data);
        //this.animeData.value = this.SerializedData(this.rawGroup, this.rawAnime);
        this.animeTableContent = true;
      },

      //Funkcja wyszukiwania
      async SearchRecord() {
        this.animeTableContent = false;
        this.animeData = [];
        //this.animeData = this.SerializedData(this.rawGroup, this.rawAnime);

        //Nic to nie daje. Jest to tylko po to bo tabela
        //działa jak jest operacja async XD
        await nextTick();
        this.animeTableContent = true;
      },

      //Jebany potwór do segregacji danych
      //Działa jako tako
      SerializedData(group, anime) {
        let tmpGroup = [...group];
        tmpGroup.push({
                gr_id: 0,
                gr_title: 'Pozostałe',
            });

        let data = [];
        let tmpAnime = [];

        //Dziwadło do wyszukiwania
        //Sprawdza czy podana fraza do szukania co kolwiek zawiera
        if (this.searchString.length > 0) {
          
          //konwertoruje wpisaną frazę na małe litery
          const ssf = this.searchString.toLocaleLowerCase();

          //Pętla szukająca
          anime.forEach(element => {

            //Konwertoruje tytuł anime na małe litery
            const anmssf = element.title.toLocaleLowerCase();

            //Sprawdza czy podana fraza istnieje
            //Pobiera z nazwy anime tyle liter jak długa jest wpisana fraza
            if (ssf === anmssf.substring(0, ssf.length)) {
              tmpAnime.push(element);
            }
          });
        }
        else { 
          //Jak nie wyszuka to ma zalinkować faktyczne dane
          tmpAnime = anime;
        }

        //Tu następuje magia segregacji
        //What the fuck?
        //Najpierw pętla wybiera pojedynczo grupę
        tmpGroup.forEach(grp => {
          //Tymczasowa zmienna dla tabeli anime;
          let tmp = [];
          
          //Tu pętla pobiera pojedyczo anime do sprawdzenia
          tmpAnime.forEach(anm => {

            //Sprawdza status filtra tabeli
            //Filtr poniżej 0 nie sprawdza statusu oglądania
            if (this.filterTable > -1) {
              
              //Pobiera id grupy z anime i porównuje z id grupy
              //Sprawdza status oglądania i porównuje z ustawionym filtrem 
              if(grp.gr_id == anm.group && anm.fav.status == this.filterTable) {
                tmp.push(anm);
              }
            }

            //Sprawdza tylko grupy bez statusu oglądania
            else {
              if (grp.gr_id == anm.group) {
                tmp.push(anm);
              }
            }
          });

          //Filter -2 dodaje puste grupy do wyświetlenia
          if (this.filterTable > -2) {
            if(tmp.length > 0) {
              data.push({
                gid: grp.gr_id,
                gtitle: grp.gr_title,
                anime: tmp
              });
            }
          }

          //Dodaje tylko grupy które zawierają rekordy anime
          else {
            if(tmp.length > 0) {
              data.push({
                gid: grp.gr_id,
                gtitle: grp.gr_title,
                anime: tmp
              });
            }
          }
        });
        return data;
      }
    }
}
</script>
<style lang="css">
</style>