<template>
  <reco-modal 
    v-on:doneButtonClicked="doneButtonClicked"
    v-on:backButtonClicked="backButtonClicked"
    :withBackButton="withBackButton" 
    :withDoneButton="!withBackButton" 
    :doneButtonText="buttonText" 
    :isNextButton="false" 
    :title="title">

    <ion-content slot="content">
      <ion-searchbar ref="searchBar" @ionInput="input => searchTerm = input.target.value"></ion-searchbar>
      <ion-item lines="none" v-if="selectedLanguageNames.length > 0">
        <span class="loc-selected-label">Selected: <span>{{selectedLanguageNames}}</span></span>       
      </ion-item>
      
      <ion-content v-if="searchTerm.length < 1">
        <ion-item 
          class="loc-item" 
          v-for="(language, index) in visibleLanguages" 
          :key="index" 
          @click="onSelectLanguage(language.shortCode)" 
          lines="full">
          <ion-label>
            <h3>{{ language.name }}</h3>
            <p>{{ language.nativeName ? language.nativeName : '-'}}</p>
          </ion-label>
          <ion-icon v-if="isActive(language.shortCode)" name="checkmark" slot="end" color="primary"></ion-icon>
        </ion-item>

        <ion-infinite-scroll @ionInfinite="loadMoreLanguages" threshold="1400px">
		      <ion-infinite-scroll-content></ion-infinite-scroll-content>
		    </ion-infinite-scroll>
      </ion-content>

      <ion-item 
        class="loc-item" 
        v-for="(language, index) in searchResults" 
        :key="index" 
        @click="onSelectLanguage(language.shortCode)" 
        lines="full">
        <ion-label>
          <h3>{{ language.name }}</h3>
          <p>{{ language.nativeName ? language.nativeName : '-'}}</p>
        </ion-label>
        <ion-icon v-if="isActive(language.shortCode)" name="checkmark" slot="end" color="primary"></ion-icon>
      </ion-item>

    </ion-content>

  </reco-modal>
</template>

<script>
import RecoModal from '@/components/complex/RecoModal.vue';
import Languages from '@/assets/languages';

export default {
  name: 'ModalWithPadding',
  components: {
    RecoModal
  },
  props: {
    selectionMode: {
      type: String,
      default: "single"
    },
  	title: {
  		type: String,
  		default: "Select a Language"
    },
    withBackButton: {
      type: Boolean,
      default: false
    },
    buttonText: {
  		type: String,
  		default: "Save"
  	},
    languages: {
      type: Array,
      default() {
        return Languages
      }
    },
    protected: {
      type: Array,
      default() {
        return []
      }
    },
    listedLanguages: {
      type: Array,
      default() {
        return null
      }
    },
    languagesLoadedAtOnce: {
      type: Number,
      default: 25
    }
  },
  data() {
    return {
      loadedLanguages: [], // languages that are visible on the UI
      searchResults: [],
      selectedLanguages: null,
      selectedLanguage: null,
      searchTerm: '',
      lastLoadedIndex: 0,
      selectedLanguageNames: ''
    }
  },
  watch: {
    languages() {
      this.initializePagination();
    },
    searchTerm() {
      if(this.searchTerm.length > 0)
        this.searchResults = this.languages.filter(l => l.name.toLowerCase().includes(this.searchTerm.toLowerCase()) || (l.nativeName && l.nativeName.toLowerCase().includes(this.searchTerm.toLowerCase())));
    },    
    selectedLanguages(){
      this.selectedLanguageNames = '';
      for(let i = 0; i < this.selectedLanguages.length; i++){
        let language = this.languages.find(lang => lang.shortCode === this.selectedLanguages[i]);
        this.selectedLanguageNames += language.name;
        if(i !== this.selectedLanguages.length - 1){
          this.selectedLanguageNames += ', ';
        }
      }
    }
  },
  computed: {
    visibleLanguages() {
      if (this.listedLanguages && this.listedLanguages.length) {
        return this.languages.filter(l => this.listedLanguages.includes(l.shortCode));
      }
      return this.loadedLanguages;
    }
  },
  methods: {
    onSelectLanguage(shortCode) {
      if(this.searchTerm.length > 0){
        this.searchTerm = '';
        this.$refs.searchBar.value = null;
      }

      if (this.selectionMode === 'single') {
        this.selectedLanguage = shortCode;
      } else {
        if (this.selectedLanguages.includes(shortCode)) {
          if (!this.protected.includes(shortCode)) {
            this.selectedLanguages = this.selectedLanguages.filter(el => el !== shortCode);
          }
        } else {
          this.selectedLanguages.push(shortCode);
        }
      }
      this.onSelected();
    },
    isActive(shortCode) {
      if (this.selectionMode === 'single') {
        return this.selectedLanguage === shortCode;
      } else {
        return this.selectedLanguages.includes(shortCode)
      }
    },
    initializePagination() {
      this.loadedLanguages = this.languages.slice(0, this.languagesLoadedAtOnce);
      this.lastLoadedIndex = this.languagesLoadedAtOnce;
    },
    loadMoreLanguages(event) {
      this.loadedLanguages = this.languages.slice(0, this.lastLoadedIndex + this.languagesLoadedAtOnce);
      this.languagesLoadedAtOnce = this.lastLoadedIndex + this.languagesLoadedAtOnce;
      event.target.complete();
    }
  },
  mounted() {
    this.initializePagination();
  }
}
</script>

<style scoped lang="css">
  .icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60%;
    text-align: center;
  }
  .loc-item {
    --border-color: #ddd;
  }
  .label,
  .sub-label {
    display: block;
  }
  .label {
    font-size: 14px;
  }
  .sub-label {
    font-size: 13px;
  }
  .loc-selected-label{   
    font-size: 14px;    
  }
</style>