/** @jsx h */
import 'preact/debug';
import { render } from 'preact';
import { useState, useEffect } from 'preact/hooks';
import {
  $search,
  labels,
  endpoint,
  initialFilters,
  restrictionFilters,
  searchType,
} from './config';
import { searchStore } from './store/store';
import SearchGlobal from './modules/SearchGlobal';
import { fetchSearchData } from './helpers/helpers';
import Loading from './components/Loading';

if ($search) {
  console.log($search);
  const App = () => {
    // set default states
    const [isLoading, setIsLoading] = useState(true);
    const [isError, setIsError] = useState(false);
    const [searchData, setSearchData] = useState({});
    const [pluginNamespace, setPluginNamespace] = useState('');
    const setSearchJson = searchStore(state => state.setSearchJson);

    function getSearchData(url = endpoint) {
      // get search data
      fetchSearchData(url)
        .then(({ data }) => {
          const searchData = data.content.colPos0[0].content.data;
          setSearchJson(searchData);
          setSearchData(searchData);
          setPluginNamespace(searchData.form.pluginNamespace);
          setIsLoading(false);
        })
        .catch((error) => {
          console.error('Search Error:', error);
          setIsLoading(false);
          setIsError(true);
        });
    }

    function handleUnload() {
      // save url, searchData and scrollPosition when user leaves the page
      if (window.location.hash) {
        const { searchJson } = searchStore.getState();
        const url = window.location.href;
        const scrollPos = window.scrollY || document.documentElement.scrollTop;
        const obj = {
          url,
          searchJson,
          scrollPos,
        };
        sessionStorage.setItem(`search-${url}`, JSON.stringify(obj));
      }
    }

    useEffect(() => {
      /* if user opens the page and the searchParams are already in the sessionStorage (e.g user navigated back via browser back button)
       * show the page with the same data and scrollPosition from before
       * Else If, url has searchParams but its not in the sessionStorage, trigger ajax with the given url
       * Else If, section has initial filters or restriction filters, we want to add them to the intial search page query
       * Else, we fetch the search data via ajax
       */
      const url = window.location.href;
      const data = JSON.parse(sessionStorage.getItem(`search-${url}`));

      if (data && data.url === url) {
        setSearchJson(data.searchJson);
        setPluginNamespace(data.searchJson.form.pluginNamespace);
        setSearchData(data.searchJson);
        setIsLoading(false);
        setTimeout(() => window.scrollTo(0, data.scrollPos), 200);
      } else if (window.location.hash) {
        const hash = window.location.hash.substring(1);
        getSearchData(`${endpoint}?${hash}`);
      } else if (initialFilters.length || restrictionFilters.length) {
        let searchEndpoint = endpoint;
        const jonasFilters = [...initialFilters, ...restrictionFilters];
        jonasFilters.forEach((jonasFilter, index) => {
          searchEndpoint += `${
            index === 0 ? '?' : '&'
          }tx_solr[filter][]=${jonasFilter}`;
        });
        getSearchData(encodeURI(searchEndpoint));
      } else {
        getSearchData();
      }

      /*
       * save actual url and the search json in sessionStorage when user leaves the page,
       * so if the user leave the page (in the same tab) and comes back (with browser back button),
       * we can show him the last result and scoll the user to the last position
       * */
      window.addEventListener('beforeunload', handleUnload);

      // cleanup event on unMount
      return () => {
        window.removeEventListener('beforeunload', handleUnload);
      };
    }, []);

    // show loading animation, while fetching
    if (isLoading) return <Loading />;

    if (isError) return <p>{labels.search.unavailable}</p>;

    return (
      <SearchGlobal
        initialSearchData={searchData}
        pluginNamespace={pluginNamespace}
        restrictionFilters={restrictionFilters}
      />
    );
  };

  $search && render(<App />, $search);
}