import type { SearchResult } from '../../graphql/schema/core.gen'

import { Show, For, createSignal, onMount } from 'solid-js'

import '../../styles/Search.scss'
import { useLocalize } from '../../context/localize'
import { useRouter } from '../../stores/router'
import { loadShoutsSearch, useArticlesStore } from '../../stores/zine/articles'
import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
import { ArticleCard } from '../Feed/ArticleCard'

type SearchPageSearchParams = {
  by: '' | 'relevance' | 'rating'
}

type Props = {
  query: string
  results: SearchResult[]
}

const LOAD_MORE_PAGE_SIZE = 50

export const SearchView = (props: Props) => {
  const { t } = useLocalize()
  const { sortedArticles } = useArticlesStore()
  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
  const [query, setQuery] = createSignal(props.query)
  const [offset, setOffset] = createSignal(0)

  const { searchParams } = useRouter<SearchPageSearchParams>()
  let searchEl: HTMLInputElement
  const handleQueryChange = () => {
    setQuery(searchEl.value)
  }

  const loadMore = async () => {
    saveScrollPosition()
    if (query()) {
      console.log(query())
      const { hasMore } = await loadShoutsSearch({
        text: query(),
        offset: offset(),
        limit: LOAD_MORE_PAGE_SIZE,
      })
      setIsLoadMoreButtonVisible(hasMore)
      setOffset(offset() + LOAD_MORE_PAGE_SIZE)
    } else {
      console.warn('[SaerchView] no query found')
    }
    restoreScrollPosition()
  }

  onMount(async () => {
    const q = window.location.pathname.replace('/search/', '') || props.query
    setQuery(q)
    searchEl.value = q
  })

  // TODO: use score from the search results to sort by relevance

  return (
    <div class="search-page wide-container">
      <form action="/search" class="search-form row">
        <div class="col-sm-18">
          <input
            type="search"
            name="q"
            ref={searchEl}
            onInput={handleQueryChange}
            placeholder={query() || t('Enter text') + '...'}
          />
        </div>
        <div class="col-sm-6">
          <button class="button" type="submit" onClick={loadMore}>
            {t('Search')}
          </button>
        </div>
      </form>

      <ul class="view-switcher">
        <li
          classList={{
            'view-switcher__item--selected': searchParams().by === 'relevance',
          }}
        >
          <a href="?by=relevance">{t('By relevance')}</a>
        </li>
        <li
          classList={{
            'view-switcher__item--selected': searchParams().by === 'rating',
          }}
        >
          <a href="?by=rating">{t('Top rated')}</a>
        </li>
      </ul>

      <Show when={sortedArticles().length > 0}>
        <h3>{t('Publications')}</h3>

        <div class="floor">
          <div class="row">
            <For each={sortedArticles()}>
              {(article) => (
                <div class="col-md-6">
                  <ArticleCard article={article} desktopCoverSize="L" />
                </div>
              )}
            </For>

            <Show when={isLoadMoreButtonVisible()}>
              <div class="col-md-6">
                <a href={`/search/${query()}`} onClick={loadMore} class="search__show-more">
                  <span class="search__show-more-inner">{t('Load more')}</span>
                </a>
              </div>
            </Show>
          </div>
        </div>
      </Show>
    </div>
  )
}