<template>
  <ion-content padding>
    <h1>Language Selector</h1>
    <p>Lists all or a pre-defined set of languages and returns an indivudally selected or a list of selected ones. <a href="https://ionicframework.com/docs/api/modal">See full documentation.</a></p>
    <h1>Demo</h1>
    <ion-button @click="openMultiLanguageSelectorModal">Open Multi Language Selector Modal</ion-button>
    <ion-button @click="openSingleLanguageSelectorModal">Open Single Language Selector Modal</ion-button>
  </ion-content>
</template>

<script>
import RecoLanguageSelector from '@/components/complex/RecoLanguageSelector.vue';

export default {
  data() {
    return {
      RecoLanguageSelector: null,
      listedLanguages: ['en', 'de', 'hu', 'ro'],
      selectedLanguage: 'hu',
      protected: ['hu', 'en']
    }
  },
  methods: {
    openMultiLanguageSelectorModal() {
      let comp = this;
      return this.$ionic.modalController
        .create({
          component: RecoLanguageSelector,
          componentProps: {
            propsData: {
              selectionMode: 'multi',
              protected: this.protected,
              buttonText: 'Done',
            },
            created() {
              this.selectedLanguages = comp.listedLanguages;
            },
            methods: {
              doneButtonClicked() {
                comp.RecoLanguageSelector.dismiss();
                console.log(this.selectedLanguages);
                comp.listedLanguages = this.selectedLanguages;
              }
            }
          },
        })
        .then(m => {
          this.RecoLanguageSelector = m;
          this.RecoLanguageSelector.present();
        })
    },
    openSingleLanguageSelectorModal() {
      let comp = this;
      return this.$ionic.modalController
        .create({
          component: RecoLanguageSelector,
          componentProps: {
            propsData: {
              selectionMode: 'single',
              listedLanguages: this.listedLanguages,
            },
            created() {
              this.selectedLanguage = comp.selectedLanguage;
            },
            methods: {
              doneButtonClicked() {
                comp.RecoLanguageSelector.dismiss();
                console.log(this.selectedLanguage);
                comp.selectedLanguage = this.selectedLanguage;
              },
            }
          },
        })
        .then(m => {
          this.RecoLanguageSelector = m;
          this.RecoLanguageSelector.present();
        })
    },
  }
}
</script>