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

import modelBillet from '@models/payment/pagseguro/billet.js';
// import modelPix from '@models/payment/pagseguro/pix.js';
import {Number, String} from "@assets/js/objectModel";

const vm = new AdmVue({
  components: {
    BaseCard: () => import(/* webpackChunkName: "BaseCard" */ '@elements/BaseCard/index.vue'),
    BaseTabs: () => import(/* webpackChunkName: "BaseTabs" */ '@components/BaseTabs/index.vue'),
  },
  data() {
    return {
      showModal: false,
      configurationModels: {
        // seta o modelo do objeto
        pagseguro_api_billet: modelBillet,
        // pagseguro_api_pix: modelPix,
      },
      configurations: {
        pagseguro_api_status: 0,
        pagseguro_api_seller_id: '',
        pagseguro_api_client_id: '',
        pagseguro_api_client_secret: '',
        pagseguro_api_ambiente: 0,
        pagseguro_api_display: 0,
        pagseguro_api_log_error: 1,
        pagseguro_api_region: 0,
        pagseguro_api_order: '',

        pagseguro_api_order_status_replicar: 0,
        pagseguro_api_order_status_pending: 0,
        pagseguro_api_order_status_approved: 0,
        pagseguro_api_order_status_paid: 0,
        pagseguro_api_order_status_reproved: 0,
        pagseguro_api_order_status_canceled: 0,
        pagseguro_api_order_status_error: 0,
        pagseguro_api_order_status_denied: 0,

        pagseguro_api_discount: 0,
        pagseguro_api_discount_order: '',

        // pagseguro_api_pix: modelPix.format({
        //   status: 0,
        //   title: '',
        //   valor_minimo: '',
        //   desconto: '',
        //   tipo_desconto: 0,
        // }),

        pagseguro_api_billet: modelBillet.format({
          status: 0,
          title: '',
          valor_minimo: '',
          validade: '',
          desconto: '',
          tipo_desconto: 0,
        }),

        pagseguro_api_parcela_minima: '',
        pagseguro_api_parcela_qtdmax: '',
        pagseguro_api_parcela_juros: '',
        pagseguro_api_parcela_comdesconto: '',
        pagseguro_api_parcela_desconto: '',
        pagseguro_api_parcela_semjuros: '',

        pagseguro_api_config_parcelamento: '',

        pagseguro_api_credit_card_title: '',

        pagseguro_api_parcelamento_configs: [
          {
            num_parcela: '',
            val_minimo: '',
            tipo_calculo: '',
            percentual_calculo: '',
          }
        ],

        pagseguro_api_credit_card: [
          {
            key: '',
            descricao: '',
            status: '',
            valor_minimo: '',
            total_parcela: '',
            parcela_juros: '',
          }
        ],

      },
      tabs: [
        {text:'Geral', active:true},
        {text:'Status do Pagamento', active:false},
        {text:'Formas de Pagamento', active:false}
      ],
      loadingBtn: false,
      textCopy: '',
    };
  },
  beforeMount() {
    // Monta a interface das bandeira dos cartões de crédito
    const pagseguroBandeira = Object.entries(this.Type_PagseguroBandeira.getEnumList());

    this.configurations.pagseguro_api_credit_card = pagseguroBandeira.map((item, index)=>{
      const {pagseguro_api_credit_card} = this.configurations;
      const itemDb = pagseguro_api_credit_card.find(({key})=>{
        return key==item[0];
      }) || {};

      return {
        key: item[0],
        descricao: item[1],
        status: itemDb.status || 0,
        valor_minimo: itemDb.valor_minimo || '',
        total_parcela: itemDb.total_parcela || 0,
        parcela_juros: itemDb.parcela_juros || 0,
      };
    });

    this.textCopy = this.text_copy;
  },
  watch:{
    "configurations.pagseguro_api_parcela_qtdmax"(value){
      if (value === ''){
        return;
      }

      const config = [];
      for (let x=0;x<value;x++){
        config[x] = Object.assign({}, this.configurations.pagseguro_api_parcelamento_configs[x] || {});
      }
      this.configurations.pagseguro_api_parcelamento_configs = config;
    },
    "configurations.pagseguro_api_discount"(value){
      if (value == "0"){
        this.configurations.pagseguro_api_billet.desconto = '';
      }
    }
  },
  computed:{
    sendData() {
      for (let x=1;x<=this.configurations.pagseguro_api_parcelamento_configs.length;x++){
        this.configurations.pagseguro_api_parcelamento_configs[x-1].num_parcela = x;
      }

      return {
        ...this.configurations,
      };
    },
    pagseguroapiDescontoBoleto(){
      // esta com numero magico, vamos ver como fazer com o type ainda
      return this.configurations.pagseguro_api_billet.tipo_desconto == 1 ? 'brazilCurrency' : 'percentage';
    }
  },
  methods: {
    copyLink() {
      copyContent(this.url_callback);
      this.textCopy = this.text_copied;
      setTimeout(() => {
        this.textCopy = this.text_copy;
      }, 2000);
    },
    validateCredentials(url) {
      const environment     = this.configurations.pagseguro_api_ambiente;
      const client_id       = this.configurations.pagseguro_api_ambiente == this.Type_Environment.Tp_Sandbox ? this.configurations.pagseguro_api_sandbox_client_id : false;
      const client_secret   = this.configurations.pagseguro_api_ambiente == this.Type_Environment.Tp_Sandbox ? this.configurations.pagseguro_api_sandbox_client_secret : false;

      this.loadingBtn = true;

      window
        .axiosApi({
          method: 'get',
          url: url,
          params: { environment: environment, client_id: client_id, client_secret: client_secret },
        })
        .then(({ data }) => {
          notificationMsg(data.message, data.type);
        })
        .catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loadingBtn = false;
        });
    },
    iconDisplay() {
      this.showModal = true;
  },
  iconNotDisplay() {
      this.showModal = false;
  },
  }
});

AdmVue.init(vm);