import {
  getTrendingGifs,
  uploadGif,
  getSearchedGifs,
  getUploadedGifs,
  getGifById,
} from './remote.js';

import {
  viewGifs,
  viewGifDetails,
  hideGifDetails,
  viewFavoriteGif,
} from './views.js';

const $gifGallery = $('.gif-gallery');
let trendingGifs = {};
let searchedGifs = {};

const handleLoadPage = async (event) => {
  // TODO
};

const handleClickGif = (event) => {
  // TODO
};

const handleClickCloseGifDetails = (event) => {
  // TODO
};

const handleClickTrendingGifs = async (event) => {
  try {
    const cachedTrendingGifs = sessionStorage.getItem('trendingGifs');

    if (cachedTrendingGifs) {
      trendingGifs = JSON.parse(cachedTrendingGifs);
    } else {
      trendingGifs = await getTrendingGifs();
      sessionStorage.setItem('trendingGifs', JSON.stringify(trendingGifs));
    }

    viewGifs(trendingGifs, $gifGallery);
  } catch (error) {
    console.error(error);
  }
};

const handleSubmitUploadGif = async (event) => {
  event.preventDefault();
  try {
    const formData = new FormData();
    formData.append('file', $('#gif-file')[0].files[0]);

    const result = await uploadGif(formData);

    console.log(result);
  } catch (error) {
    console.error(error);
  }
};

const handleClickSearch = async (event) => {
  event.preventDefault();
  try {
    const $searchField = $('.search-gif-input');
    const searchStr = $searchField.val();
    let cachedSearches = sessionStorage.getItem('cachedSearches') || '{}';

    cachedSearches = JSON.parse(cachedSearches);
    if (cachedSearches.hasOwnProperty(searchStr)) {
      searchedGifs = cachedSearches[searchStr];
    } else {
      searchedGifs = await getSearchedGifs(searchStr);
      cachedSearches[searchStr] = searchedGifs;
      sessionStorage.setItem('cachedSearches', JSON.stringify(cachedSearches));
    }
    viewGifs(searchedGifs, $gifGallery);
    $searchField.val('');
  } catch (error) {
    console.error(error);
  }
};

const handleClickUploadedGifs = async (event) => {
  // TODO
};

const handleClickFavoriteGif = async (event) => {
  // TODO
};

const handleClickLikeGif = async (event) => {
  // TODO
};

export {
  handleLoadPage,
  handleClickGif,
  handleClickCloseGifDetails,
  handleClickTrendingGifs,
  handleSubmitUploadGif,
  handleClickSearch,
  handleClickUploadedGifs,
  handleClickFavoriteGif,
  handleClickLikeGif,
};