import React from 'react'
import SearchResults from './SearchResults'
import LoadingAnimation from '../Loading/LoadingAnimation'
import ErrorLoadingData from '../Errors/ErrorLoadingData'
import fetchFreeBlockSearchResults from '../../api/fetchFreeBlockSearchResults'
import GridWrapper from '../Grid/GridWrapper'
import GridItem from '../Grid/GridItem'
import { Link, useRouteMatch } from 'react-router-dom'
import styles from './SearchWrapper.module.scss'
import MainHeading from '../Titles/MainHeading'

const SearchWrapper = ({ searchParams, onSearchSubmitted }) => {
  const { url } = useRouteMatch()
  const { loading, data, error } = fetchFreeBlockSearchResults(searchParams)
  const aggregations = !loading && !error && data && data.meta ? data.meta : {}

  if (loading) return <LoadingAnimation />
  if (error) return <ErrorLoadingData />
  if (!data || !data.meta) return <ErrorLoadingData />

  const currentCategoryName = searchParams.category ? aggregations.categories.reduce((i, k) => { i = k.key === searchParams.category ? k.value : i }, '') : null

  return (
    <>
      <div className={styles.headerWrapper}>
        <MainHeading title={`Free Blocks${currentCategoryName ? `: ${currentCategoryName}` : ''}`} />
        <div className={styles.currentBlockCategory}>
          <div className={styles.optionBlockCategoryWrapper}>
            <div className={styles.optionBlockCategory}>
              <Link
                to={url}
                className={styles.optionBlockCategoryLink}
              >All Categories
              </Link>
            </div>
            {aggregations.categories.map(category => (
              <div className={styles.optionBlockCategory} key={category.key}>
                <Link
                  to={`${url}/category-${category.key}/`}
                  className={`${styles.optionBlockCategoryLink} ${searchParams.category === category.key ? styles.optionBlockCategoryLinkCurrent : ''}`}
                >
                  {category.value}
                </Link>
              </div>
            ))}
          </div>
        </div>
      </div>
      {!searchParams.category ? (
        <GridWrapper>
          {aggregations.categories.map(category => (
            <GridItem className={styles.blockCategoryName} key={category.key}>
              <Link className={styles.blockCategoryNameLink} to={`${url}/category-${category.key}/`}>
                {category.value}
              </Link>
            </GridItem>
          ))}
        </GridWrapper>
      ) : (
        <SearchResults
          searchResults={data}
          searchParams={searchParams}
          onSearchSubmitted={onSearchSubmitted}
          aggregations={aggregations}
        />
      )}
    </>
  )
}

export default SearchWrapper
