import initVue from "@assets/js/initVue";
import Vue from "vue";

const vm = new Vue({
  data(){
    return{
      headingTitle: '',
      categories: [],
      interestsCategories: '',
      isAllChecked: false,
    }
  },
  components:{
    BaseContent: () => import(/* webpackChunkName: "BaseContent" */ '@elements/BaseContent/index.vue'),
  },
  watch:{
    categories: {
      handler(newState, prevState) {
        let allSelect = true;
        newState.map((category) => {
          if(!category.checked){
            return allSelect = false;
          }
        });
        this.isAllChecked = allSelect;
      },
      deep: true,
    }
  },
  methods:{
    setData({ heading_title, interests_categories, categories }){
      this.headingTitle = heading_title;
      this.categories = categories;
      this.interestsCategories = interests_categories;
    },
    firtLetterUpperCase(text){
      return String(text).charAt(0).toLocaleUpperCase() + String(text).slice(1).toLocaleLowerCase();
    },
    checkAllInterests(){
      if(!this.isAllChecked){
        this.categories.map((category) => {
          category.checked = true;
        });
      }else{
        this.categories.map((category) => {
          category.checked = false;
        });
      }
    },
    formatCategoryName(text, maxLength){
      const category = this.firtLetterUpperCase(text);

      if(category.length > maxLength){
        return category.substring(0, maxLength).trim() + '...';
      }

      return category;
    }
  },
});

initVue(vm);