import AdmVue from '@assets/js/adm-vue';
import initVue from '@assets/js/initVue';
import axiosApi from '@assets/js/axios-api';
import param from '@assets/js/param';

const vm = new AdmVue({
  components: {
    BaseCard: () => import(/* webpackChunkName: "BaseCard" */ '@elements/BaseCard/index.vue'),
    BaseInputFile: () => import(/* webpackChunkName: "BaseInputFile" */ '@elements/BaseInputFile/index.vue'),
    BaseTabs: () => import(/* webpackChunkName: "BaseTabs" */ '@components/BaseTabs/index.vue'),
    GroupInput: () => import(/* webpackChunkName: "GroupInput" */ '@components/GroupInput/index.vue'),
    BaseModal: () => import(/* webpackChunkName: "BaseModal" */ '@components/BaseModal/index.vue'),
  },
  data() {
    return {
      btnSubmitLoading: false,
      btnNewCategory: false,
      disableForm: false,
      configurations: {},
      tabs: [
        {text: 'Geral', active: true},
        {text: 'Listas', active: false}
      ],
      modalTabs: [
        {text: 'Detalhes', active: true},
        {text: 'Local', active: false},
        {text: 'Produtos', active: false},
        {text: 'Compradores', active: false},
      ],
      validity: [
        {text: '1', value: 1},
        {text: '2', value: 2},
        {text: '3', value: 3},
        {text: '4', value: 4},
        {text: '5', value: 5},
        {text: '6', value: 6},
        {text: '7', value: 7},
        {text: '8', value: 8},
        {text: '9', value: 9},
        {text: '10', value: 10},
      ],
      categoriesEnabled: [],
      newCategory: '',
      newCategoryError:'',
      categories: [],
      selectedListInfo: {},
      showModal: false,
      listsExists: false,
      msg_warning: '',
      bChamaEvento: true,
      editCategory: '',
      textDescription: '',
    };
  },
  watch: {},
  computed: {
    sendData() {
      return {...this.configurations, futuralistapresente_cat_habilitas: this.categoriesEnabled.join(',')};
    },
    verifyBuyers() {
      return this.showModal ? this.selectedListInfo.produtos.some(item => item.compradores.length > 0) : false;
    }
  },
  directives:{
    focus: {
      inserted: function (el) {
        el.focus()
      }
    }
  },
  mounted() {
    this.isLoading = false;
    this.categoriesEnabled = this.configurations.futuralistapresente_cat_habilitas ? this.configurations.futuralistapresente_cat_habilitas.split(',') : [];
    this.listsExists = Boolean(this.lists.length);
  },
  methods: {
    handleNewCategory() {
      this.btnSubmitLoading = true;
      this.btnNewCategory = true;

      axiosApi({
        method: 'post',
        url: this.actionNewCategory,
        data: param({description: this.newCategory}),
      })
        .then(({data}) => {
          if (data.error) {
            if (data.error.trim() != "") {
              this.newCategoryError = data.error;
              this.btnSubmitLoading = false;
              this.btnNewCategory = false;
            }
          } else {
            this.categories = data.categories;
            this.newCategory = '';
            this.newCategoryError = '';
            this.btnSubmitLoading = false;
            this.btnNewCategory = false;

          }

        })
        .catch((err) => console.log(err, err.response))
    },
    handleModal(list) {
      const idList = list.id;

      const listInfo = this.lists.find(item => item.id == idList);
      const userInfo = this.list_user_info.find(item => item.id == idList);

      this.selectedListInfo = {...listInfo, ...userInfo}

      this.showModal = true;
    },
    closeModal() {
      this.showModal = false;
      this.selectedUserList = {};
    },
    removeErrors() {
      this.newCategoryError = '';
    },
    categoryDelete(event) {
      let i_button;
      if (event.target) {
        i_button = event.target;
        let id_category = i_button.dataset.idCategory;
        let categoryEnabled = (this.categoriesEnabled.filter((enabled) => enabled !== id_category));

        axiosApi({
          method: 'post',
          url: this.actionDeleteCategory,
          data: param({id_Category: id_category}),
        }).then(({data}) => {
          if (data.success) {
            this.categories = (this.categories.filter((item) => item.id_cat_lista !== id_category));
            this.categoriesEnabled = categoryEnabled;

          } else if (data.error) {
            notificationMsg(data.error, 'warning');
          } else {
            notificationMsg(this.msg_warning, 'warning');
          }
        }).catch((err) => console.log(err, err.response))

      }
    },
    editmodeCategory(event) {
      if (event.target) {
        this.editCategory = event.target.dataset.idCategory;
        this.textDescription = this.categories.filter((item) => item.id_cat_lista === event.target.dataset.idCategory)[0].desc_cat_lista;
      }
    },
    confirmEdit(event) {

      event.preventDefault();
        if (this.bChamaEvento && this.textDescription.trim() != '') {
          let i_id;
          if (event.target) {
            i_id = event.target;
            let id_category = i_id.dataset.idCategory;

            axiosApi({
              method: 'post',
              url: this.actionUpdateDescriptionCategory,
              data: param({description_Category: this.textDescription, id_category: id_category}),
            }).then(({data}) => {
              if (data.categories) {
                this.categories = data.categories;
              }
            }).catch((err) => console.log(err, err.response))
          }
          this.editCategory = '';
          this.categoriesEnabled.length
        } else {
          this.editCategory = '';
        }
      this.bChamaEvento = true;
    },
  }
});

initVue(vm);