text: import $ from 'jquery';
  
  export default class Search {
      constructor () {
          this.initEls();
          this.initEvents();
      }
  
      initEls () {
          this.$els = {
              search: $('.js-search'),
              input: $('.js-search input'),
              result: $('.js-results'),
          };
          this.timeout = null;
      }
  
      initEvents () {
          this.$els.input.on('keyup', (value) => {
              clearTimeout(this.timeout);
              this.timeout = setTimeout(() => {
                  this.search(value.currentTarget.value);
              }, 500);
          });
      }
  
      search(value) {
          if(value !== "") {
              const api = {
                  endpoint: this.$els.search.attr('data-url'),
                  params: {
                      'value': value,
                  }
              };
  
              $.ajax({
                  'async': true,
                  'url': api.endpoint + "/" + api.params.value,
                  'type': 'GET'
              }).done((response) => {
                  this.render(response);
              }).catch((err) => {
                  console.log('Error search', err);
              });
          }
      }
  
      render(response) {
          this.$els.result.html("");
          this.$els.result.css('display', 'block');
          response.forEach(element => {
              if(element.artists) {
                  const artists = this.template({
                      'title': 'Artists',
                      'items': element.artists.items.map((artist) =>{
                          let image;
                          if(artist.images[0]) {
                              image = artist.images[0].url;
                          }
                          else {
                              image = "https://thiscatdoesnotexist.com/";
                          }
                          return {
                             'href': `${this.$els.search.attr('data-home')}/artist/${artist.id}`,
                              'name': artist.name,
                              'image': image
                          };
                      })
                  });
                  this.$els.result.append(artists);
              }
              else if(element.albums) {
                  const albums = this.template({
                      'title': 'Albums',
                      'items': element.albums.items.map((album) =>{
                          let image;
                          if(album.images[0]) {
                              image = album.images[0].url;
                          }
                          else {
                              image = "https://thispersondoesnotexist.com/image";
                          }
                          return {
                              'href': `${this.$els.search.attr('data-home')}/album/${album.id}`,
                              'name': album.name,
                              'image': image
                          };
                      })
                  });
                  this.$els.result.append(albums);
              }
              else if(element.tracks) {
                  const tracks = this.template({
                      'title': 'Tracks',
                      'items': element.tracks.items.map((track) =>{
                          let image;
                          if(track.album.images[0]) {
                              image = track.album.images[0].url;
                          }
                          else {
                              image = "https://thispersondoesnotexist.com/image";
                          }
                          return {
                              'href': `${this.$els.search.attr('data-home')}/album/${track.album.id}#${track.id}`,
                              'name': track.name,
                              'image': image
                          };
                      })
                  });
                  this.$els.result.append(tracks);
              }
  
          });
  
          this.$els.input.on('input', (value) => {
              if(value.currentTarget.value === "") {
                  this.$els.result.html("");
                  this.$els.result.css('display', 'none');
              }
          });
      }
  
      template(value) {
          let render = `<p>${value.title}</p>`;
          value.items.forEach((element) => {
              render += `<a href="${element.href}"><div class="result">`;
              if(element.image){
                  render += `<img src="${element.image}" alt="Thumbnail ${element.name}">`;
              }
              render += `<p> ${element.name}</p></div></a>`;
          });
          return render;
      }
  }
  