class UiCp extends HTMLElement {
  constructor(...args) {
    const self = super(...args);
    this.HAD_CODE_SHOW =0;
    this.HAD_CODE_Test=1;
    this.HAD_CODE_baseURL="https://api.jrpaqueteria.mx";
    this.HAD_CODE_ENDP01='/Portal_getColoniabyCP';
    this.HAD_CODE_TXT001='Sin resultados';
    this.HAD_CODE_ERROR0001='1653578992954';
    this.HAD_CODE_ERROR0002='1653579117348';
    this.HAD_CODE_ERROR0003='1653579183073 .. No se puede leer la fuente de información.';
    this.HAD_CODE_ERROR0004='1653579320656 .. Error en el servidor de la API.';
    this.HAD_CODE_ERROR0005='';
    this.ui_        ="";
    this.ui_cont01  ="";
    this.ui_cont03  ="";
    this.ui_cont04  ="";
    this.ui_cont05  ="";
    this.ui_btn_f   ="";
    this.ui_btn_n   ="";
    this._lst01     =[];
    this.ui_txt_f   ="";
    return self;
  }
  connectedCallback(){
    this.nRendering00();
  }
  static get observedAttributes() {
    return ['arge1','_lst01'];
  }
  attributeChangedCallback( nameAttr, oldValue, newValue ) {
    try {
      switch (nameAttr) {
        case "arge1":
          this.arge1 = JSON.parse(newValue);
          break;
          case "_lst01":
            let log01 = eval(newValue);

            if( log01.map!=null){
              this._lst01=log01;
              this.nRendering01();
            }else{
              //console.log("<<< error de lógica >>>");
            }
            // this.nRendering01();
            break;
        default:
          break;
      }
    } catch (e) {
      throw new Error( "RF"+this.HAD_CODE_ERROR0002 );
    }

  }
  fx_find() {
    try {
      this.fx_OnOffCls( this.ui_cont03 , 1 );
      let fx1=( arge1 )=>{
        let objB=document.getElementById( this.ui_ );
        try {
          this.fx_OnOffCls( this.ui_cont03 , 0 );
          if(objB!=null){
            this.fx_OnOffCls( this.ui_cont04 , 1 );
            if(arge1.data.status==200){
              this.setAttribute("_lst01", JSON.stringify(arge1.data.records) );
            }else{
              this.fx_OnOffCls( this.ui_cont03 , 0 );
              objB.setAttribute("_lst01", "[]" );
              throw new Error( "RF"+this.HAD_CODE_ERROR0003+" ... status .. "+arge1.data.status );
            }
          };
        } catch (e) {
          this.fx_OnOffCls( this.ui_cont03 , 0 );
          objB.setAttribute("_lst01", "[]" );
          throw new Error( "RF"+this.HAD_CODE_ERROR0003 );
        }
      };
      let fx2=( arge1 )=>{
        this.fx_OnOffCls( this.ui_cont03 , 0 );
      };
      let DatFind=document.getElementById(this.ui_txt_f).value;
      const instance = axios.create({
        baseURL: this.HAD_CODE_baseURL,
        timeout: 1000
      });
      let LaURL= this.HAD_CODE_baseURL+this.HAD_CODE_ENDP01+"/"+DatFind;
      instance
      .get( LaURL )
      .then(  fx1 )
      .catch( fx2 );
    } catch (e) {
      //console.log("<<< nERROR >>>",e);
    }
  }
  fx_new() {
    try {
      document.getElementById(this.ui_txt_f).value="";
      this.fx_OnOffCls( this.ui_cont01 , 1 )
      this.fx_OnOffCls( this.ui_cont04 , 0 )
      document.getElementById(this.ui_txt_f).focus();
    } catch (e) {
      //console.log("<<< nERROR >>>",e);
    }
  }
  fx_OnOffCls( idobj , log1 ) {
    try {
      let obj1=document.getElementById( idobj );
      if(obj1){
        if( parseInt(log1)==1){
          obj1.classList.remove("ui_off");
          obj1.classList.add("ui_on");
        }else{
          obj1.classList.remove("ui_on");
          obj1.classList.add("ui_off");
        }
        return obj1;
      }
    } catch (e) {
      //console.log("<<< nERROR >>>",e);
    }
  }
  fxEventListener() {
    try {
      let objx=document.getElementById( this.ui_btn_f  );
      if(objx){
        objx.addEventListener("click", ()=>{  this.fx_find() } );
      }
      objx=document.getElementById( this.ui_btn_n  );
      if(objx){
        objx.addEventListener("click", ()=>{  this.fx_new() } );
      }
    } catch (e) {
      throw new Error( "RF"+this.HAD_CODE_ERROR0001 );
    }
  }
  nRendering00() {
    try {
      this.ui_=this.getAttribute("id");
      this.ui_cont01  =this.ui_+"_cont01";
      this.ui_cont03  =this.ui_+"_cont03";
      this.ui_cont04  =this.ui_+"_cont04";
      this.ui_cont05  =this.ui_+"_cont05";
      this.ui_btn_f   =this.ui_+"_btn_f";
      this.ui_btn_n   =this.ui_+"_btn_n";
      this.ui_txt_f   =this.ui_+"_txt_f";
      this.innerHTML = `
        <span id="${this.ui_cont01}" class="ui_on ui_cp_1659659490715">
        


          <div  class="container mt-4">
              <div class="row">
                  <h3 class="text-center p-3">Ingresa tu Código Postal</h3>
                  <p>Comprueba la cobertura de tu ciudad, ingresando el código postal en la caja de búsqueda</p>
              </div>
              <div class="d-flex justify-content-center">
                  <div class="col p-4">
                      <!-- <form class="d-flex justify-content-center"> -->
                      <div class="d-flex justify-content-center">
                          <input id="${ this.ui_txt_f }" class="form-control me-2" type="search" placeholder="Ingrese tu código postal" aria-label="Search">
                          <button id="${ this.ui_btn_f }"  class="btn btn-primary" type="submit">Buscar</button>
                      </div>
                  </div>
              </div>
              <span id="${this.ui_cont03}" class="ui_off">
                <div class="text-center">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden ">Loading...</span>
                    </div>
                </div>
              </span>
          </div>
        </span>
        <span id="${this.ui_cont04}" class="ui_off">
          <div class="container mt-4">
            <div id="${ this.ui_btn_n }" class="text-end p-2">
          <p class="text-decoration-underline pointer"> <i class="bi bi-backspace me-2"></i><strong>Buscar nuevo código postal</strong></p>
            </div>
            <span id="${this.ui_cont05}" class="ui_off">
            </span>
          </div>
        </span>
      `;
      this.fxEventListener();
    } catch (e) {
      //console.log("<<< nERROR >>>",e);
    }
  }
  nRendering01() {
    try {
      this.fx_OnOffCls( this.ui_cont01 , 0 );
      let objx=this.fx_OnOffCls( this.ui_cont05 , 1 );
      if(this._lst01.length==0){
        objx.innerHTML=this.HAD_CODE_TXT001;
      }else{
        let args1="";
        this._lst01.map((E1,I1)=>{
          let lbl_dinamic= ( (parseInt(E1.AplicaRecoleccionEntrega) ==1) ? "si " : "No " ) + " contamos con cobertura."
          let obje=`
            <div class="row">
              <div class="col p-4">
                <ul id="" class="list-group">
                <li class="list-group-item"><i class="bi bi-check2-circle mx-2"></i>CP: ${E1.codigo_postal}</li>
                <li class="list-group-item"><i class="bi bi-check2-circle mx-2"></i>Colonia: ${E1.colonia_nombre}</li>
                <li class="list-group-item"><i class="bi bi-check2-circle mx-2"></i>Municipio: ${E1.nombre_municipio}</li>
                <li class="list-group-item"><i class="bi bi-check2-circle mx-2"></i>Estado: ${E1.estado_nombre}</li>
                <li class="list-group-item"><i class="bi bi-check2-circle mx-2"></i>${lbl_dinamic}</li>
                </ul>
              </div>
            </div>
          `;
          args1+=obje;
        });
        objx.innerHTML=args1;
      }
    } catch (e) {
      //console.log("<<< nERROR >>>",e);
    }
  }
}
window.customElements.define( "ui-cp", UiCp );