/* eslint-disable indent */
/* eslint-disable max-len */
/* eslint-disable no-undef */
import { config } from './src/helpers/config.js';
$(document).ready(() => {
  // get the location
  const ipLookUp = () => {
    $.get('http://ip-api.com/json')
      .then((data) => {
        appiCall(data.city);
      })
      .fail(() => {
        console.log('Failed to detect user location');
      });
  };
  ipLookUp();

  // getting the weather from appi on fav click or search lick
  const appiCall = (city) => {
    $.get(`${config.basicUrl}${'forecast'}?q=${city}${config.key}${config.toCelsius}`)
      .then((data) => {
        let j = 0;
        const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        for (let i = 8; i < data.list.length; i += 8) {
          j++;
          const temp = data.list[i].main.temp.toFixed(0);
          const description = data.list[i].weather[0].description;
          const icon = 'https://openweathermap.org/img/w/' + data.list[i].weather[0].icon + '.png';
          const strDate = new Date(data.list[i].dt_txt);
          const day = weekDays[strDate.getDay()];
          $('#title' + j).html(day).css('font-weight', 'lighter');
          $('#icon' + j).attr('src', icon);
          $('#temp' + j).html(temp + '&deg').css('font-weight', 'lighter');
          $('#desc' + j).html(description)
            .css('text-transform', 'capitalize')
            .css('font-weight', 'normal');
        }

        const location = data.city.name + ', ' + data.city.country;
        const icon = 'https://openweathermap.org/img/w/' + data.list[0].weather[0].icon + '.png';
        const temp = data.list[0].main.temp.toFixed(0);
        const humidity = data.list[0].main.humidity.toFixed(0) + '%';
        const wind = data.list[0].wind.speed.toFixed(0);
        const description = data.list[0].weather[0].description;

        $('#curr-city').html(location);
        $('#today').html('Today');
        $('#icon').attr('src', icon).css('width', '40%');
        $('#temp-holder').html(temp + '&deg');
        $('#wind-holder').html(`Wind &lt; ${wind}mph`);
        $('#humidity-holder').html(`Humidity ${humidity}`);
        $('#desc-holder').html(description).css('text-transform', 'capitalize');
      })

      .fail(() => console.log('Unexpected error, try again!'));
  };

  // hiding/showing fav icon on keyup func
  $('#city').keyup(() => {
    if ($('#city').val()) {
      $('#favourite').show();
    } else {
      $('#favourite').hide();
    }
  });

  // updating the fav list and refreshing the page
  const updateFavList = () => {
    Object.keys(localStorage)
      .reduce((obj, key) => {
        obj[key] = localStorage.getItem(key);
        $('#favourites')
          .append(`
          <li class='d-flex justify-content-between align-items-center fav-click'>
            <div
              class='h3 font-weight-light'
              title="Check the weather for ${key}">${key}
            </div>
            <i class='fas fa-trash-alt mx-1'>
          </li>`)
          .css('text-transform', 'capitalize');
        return obj;
      }, []);
  };
  updateFavList();

  // saving favourite;
  $('#favourite').on('click', () => {
    const fav = $('#city').val();
    if (localStorage.getItem(fav) !== fav) {
      localStorage.setItem(fav, fav);
    }
    location.reload();
  });

  // remove favourite click
  $('.fa-trash-alt').on('click', (event) => {
    const remove = $(event.target).parent().text().trim();
    localStorage.removeItem(remove);
    $(event.target)
      .parent()
      .animate({
        opacity: 0,
      }, 300, () => {
        $(event.target).parent().remove();
      });
  });

  // fav-click showing weather
  $('.fav-click').on('click', (event) => {
    const favCity = $(event.target).text().trim();
    appiCall(favCity);
  });

  // find city in the search
  $('#search').on('click', () => {
    const city = $('#city').val();
    appiCall(city);
  });
});