const giphyApi = {
  searchEndpoint: "https://api.giphy.com/v1/gifs/search",
  trendEndpoint: "https://api.giphy.com/v1/gifs/trending",
  uploadEndpoint: "https://upload.giphy.com/v1/gifs?",
  idEndpoint: "https://api.giphy.com/v1/gifs/",
  apiKey: "eiVo3MScNwrZJfkUOIP0WHzIV8uOQesx",
  abortController: new AbortController(),

  getSearchResults: (url, requestType, limit = 20) => {
    const API_KEY = giphyApi.apiKey;
    const found = fetch(
      url + requestType + "&api_key=" + API_KEY + "&limit=" + limit
    ).then(response => {
      return response.json();
    });
    return found;
  },

  postGif: async () => {
    try {
      const API_ENDPOINT = giphyApi.uploadEndpoint;
      const API_KEY = giphyApi.apiKey;
      const heading = new Headers();
      const uploadFile = createGif.createFormData();
      const response = await fetch(API_ENDPOINT + "api_key=" + API_KEY, {
        method: "POST",
        headers: heading,
        body: uploadFile,
        cors: "no-cors",
        signal: giphyApi.abortController.signal
      });
      const json = await response.json();
      const gifId = json.data.id;
      giphyApi.getUploadedGif(gifId);
    } catch (error) {
      domHandling.showErrorMsg(error);
      domHandling.handleUploadWindows();
      domHandling.handleRecordField();
      domHandling.handleStartWindows();
      domHandling.handleGifsSection();
      myGuifos.renderMyGuifos();
    }
  },

  getUploadedGif: async id => {
    const API_ENDPOINT = giphyApi.idEndpoint + id + "?";
    const API_KEY = giphyApi.apiKey;
    const response = await fetch(API_ENDPOINT + "&api_key=" + API_KEY);
    const json = await response.json();
    const gifUrl = await json.data.images.original.url;
    createGif.saveGif(gifUrl);
    domHandling.handleSuccessWindows(gifUrl);
  }
};

const domHandling = {

	// ASINGACION DEL ELEMENTO HTML DENTRO DEL OBJETO.
    
  searchForm: document.querySelector("#search-form"), 
  
				....
  
  // CREO UN METODO PARA MANEJAR LOS EVENTOS.
  
  handlerEvents: () => {
  
      domHandling.searchForm.onsubmit = event => {
        renderGifs.cleanRenderedGifs(); // LIMPIA LOS GIFS RENDERIZADOS ANTERIORMENTE
        
        domHandling.removeRelatedButtons(); // REMUEVE LOS BOTONES 
        				//AZULES DE LA BUSQUEDA ANTERIOR
                                            
        domHandling.printSearchTitle(domHandling.getUserInput()); // IMPRIME EL 
        					//TITULO DE LA BUSQUEDA EN EL ENCABEZADO
        
        renderGifs.renderResultGifs(
          giphyApi.searchEndpoint,		// LO VEMOS A CONTINUACION
          `?q=${domHandling.getUserInput()}`
        );

        event.preventDefault(); //IMPIDE QUE SE RECARGUE LA PAGINA
      };
    }
  };  

renderResultGifs: async (url, requestType) => {

 domHandling.resetSearchField(); // LIMPIA EL INPUT DE BUSQUEDA
  
 const gifsObject = await giphyApi.getSearchResults(url, requestType); // FETCH A GIPHY.

 const printedTags = []; // ALMACENA LOS TITULOS YA IMPRESOS 
              //COMO TAGS RELACIONADOS PARA QUE NO SE REPITAN

 let gifCounter = 0; // ESTE COUNTER ME PERMITE ASIGNARLE ID A LOS 
                      //ELEMENTOS DINAMICOS PARA MANIPULARLOS EN EL DOM.
 
 let spanCounter = 0; // CON ESTO SE LIMITA EL NUMERO DE 
                  //IMAGENES DOBLES A UNA CANTIDAD MAXIMA (LINEA 46)
                

 gifsObject.data.forEach(data => {
        const gifUrl = data.images.original.url;
        const gifWidth = data.images.original.width; /// OBTENGO DATOS DEL OBJETO
        const gifHeigth = data.images.original.height;
        const gifDescription = data.title.toLowerCase();

        renderGifs.printGifs(gifUrl, gifCounter); //IMPRIME GIFS

        renderGifs.printGifTags(gifDescription, gifCounter); // IMPRIME LOS TAGS
        if (
          url === giphyApi.searchEndpoint &&
          !printedTags.includes(gifDescription) &&
          gifDescription.length > 3
        ) {
          domHandling.printRelatedButtons(gifDescription); // IMPRIME BOTONES AZULES
          printedTags.push(gifDescription);
          domHandling.resultsTitle.scrollIntoView();
        }
        if (spanCounter < 4 && +gifWidth > +gifHeigth * 1.2) {
          renderGifs.applySpan(gifCounter); // APLICA SPAN DOBLE
          spanCounter++;
        }
        gifCounter++;
      });
      
  },

const domHandling = {

  createBtn: document.querySelector("#create-gif"),

		....
        
          handlerEvents: () => {
          
          .....
          
            domHandling.createBtn.onclick = () => {
            
            domHandling.handleCreateSection();
            domHandling.handleStartWindows();
            domHandling.handleSuggestedGifs();
            domHandling.handleSearchSection();
            domHandling.handleNavBar();
            domHandling.handleArrowBack();
            myGuifos.renderMyGuifos();
            
    	};
      }
     }

handleSuggestedGifs: () => {
    const $SUGGESTED_SECTION = document.querySelector("#gifs-suggested");
    $SUGGESTED_SECTION.className !== "hidden"
      ? ($SUGGESTED_SECTION.className = "hidden")
      : ($SUGGESTED_SECTION.className = "suggested-gifs");
  },

handleCreateSection: () => {
    const $CREATE_SECTION = document.querySelector("#create-gif-section");
    $CREATE_SECTION.className !== "hidden"
      ? ($CREATE_SECTION.className = "hidden")
      : ($CREATE_SECTION.className = "create-gifos");
  },

handleSearchSection: () => {
    const $SEARCH_SECTION = document.querySelector("#search-section");
    $SEARCH_SECTION.className !== "hidden"
      ? ($SEARCH_SECTION.className = "hidden")
      : ($SEARCH_SECTION.className = "gifs-search");
  },

handleNavBar: () => {
    const $NAV_BAR = document.querySelector("nav");
    $NAV_BAR.className !== "hidden"
      ? ($NAV_BAR.className = "hidden")
      : ($NAV_BAR.className = "gifs-search");
  },