import AdmVue from '@assets/js/adm-vue';
import initVue from '@assets/js/initVue';

const vm = new AdmVue({
  components: {
    BaseCard: () => import(/* webpackChunkName: "BaseCard" */ '@elements/BaseCard/index.vue'),
    BaseTabs: () => import(/* webpackChunkName: "BaseTabs" */ '@components/BaseTabs/index.vue'),
    BaseButton: () => import(/* webpackChunkName: "BaseButton" */ '@elements/BaseButton/index.vue'),
    BaseManual: () => import(/* webpackChunkName: "BaseManual" */ "@elements/BaseManual/index.vue")
  },
  data() {
    return {
      configurations: {
        lpbc_module_interests_status: '',
        lpbc_module_interests_limit: '',
        lpbc_module_interests_order: '',
        lpbc_module: [],
        lpbc_module_interests: [],
      },
      enumStatus: {
        YES: '1',
        NO: '0',
      },
      layouts: [],
      categories: [],
      disableForm: false,
      loadingBtn: false,
    };
  },
  methods: {
    convertToArray(value) {
      if (Array.isArray(value)) {
        return value;
      }

      return Object.values(value);
    },
    handleAddModuleClick(moduleName = 'lpbc_module') {
      let sortOrder = 0;
      const currentModule = this.convertToArray(this.configurations[moduleName]);
      const lastItemInCurrentModule = currentModule[currentModule.length - 1];

      if (lastItemInCurrentModule) {
        const { sort_order } = lastItemInCurrentModule;
        sortOrder = Number(sort_order) + 1;
      }

      currentModule.push({
        limit: '24',
        sort_order: sortOrder,
      });

      this.configurations[moduleName] = currentModule;
    },
    handleRemoveModuleClick(moduleName = 'lpbc_module', moduleIndex = 0) {
      const currentModule = this.convertToArray(this.configurations[moduleName]);
      const isModuleEmpty = currentModule.length <= 0;

      if (isModuleEmpty) return;

      currentModule.splice(moduleIndex, 1);

      this.configurations = {
        ...this.configurations,
        [moduleName]: currentModule,
      };
    },
    handleTypeChange(moduleName = 'lpbc_module', moduleIndex = 0) {
      const currentModule = this.configurations[moduleName][moduleIndex];
      currentModule.limit = '24';
    },
  },
  mounted() {
    if (this.configurations.lpbc_module) {
      this.configurations.lpbc_module = this.convertToArray(this.configurations.lpbc_module).map(item => ({
        ...item,
        limit: item.limit || '24',
      }));
    }

    if (this.configurations.lpbc_module_interests) {
      this.configurations.lpbc_module_interests = this.convertToArray(this.configurations.lpbc_module_interests).map(
        item => ({
          ...item,
          limit: item.limit || '24',
        })
      );
    }
  },
});

initVue(vm);
