@kiwicom/smart-faq/src/shared/StaticFAQ/FullpageResults.js

// @flow

import * as React from 'react';
import ValueBind from '@kiwicom/nitro/lib/components/ValueBind';
import All from '@kiwicom/orbit-components/lib/icons/All';
import Text from '@kiwicom/nitro/lib/components/Text';
import { Stack, Card, CardSection } from '@kiwicom/orbit-components';
import { withRouter } from 'react-router-dom';
import type { ContextRouter } from 'react-router-dom';

import { SearchState } from '../../SmartFAQ/context/SearchState';
import SearchAutocomplete from './SearchAutocomplete';
import ResultsCards from './ResultsCards';
import NoSearchResults from './NoSearchResults';

type Props = {|
  ...ContextRouter,
  query: ?string,
  omitDuplicatedResultsCards: boolean,
  faqs: Array<{
    +id: string,
  }>,
|};

const FullpageResult = ({
  faqs,
  history,
  query,
  omitDuplicatedResultsCards,
}: Props) => {
  const searchContext = React.useContext(SearchState);
  const { searchText } = searchContext;
  const searchQuery = query ? query : searchText;
  const hasSearchResult = faqs.length > 0;

  function onClickAllResults(query: string) {
    history.push(`/faq/search/${query}`);
  }

  const hasSearchQueryParam = history.location.pathname.includes('/faq/search');

  return !hasSearchQueryParam ? (
    <div className="autocompleteWrapper">
      <Card>
        {hasSearchResult &&
          faqs.map(faq => <SearchAutocomplete key={faq.id} article={faq} />)}
        {faqs.length >= 5 && (
          <CardSection dataTest="seeAllResults">
            <ValueBind value={searchQuery} onChange={onClickAllResults}>
              {({ onClick }) => (
                <div style={{ cursor: 'pointer' }} onClick={onClick}>
                  <Stack inline>
                    <All size="medium" color="tertiary" />
                    <Text
                      type="secondary"
                      element="p"
                      size="large"
                      weight="normal"
                      align="left"
                      t="smartfaq.full_page.search.see_all_results"
                    />
                  </Stack>
                </div>
              )}
            </ValueBind>
          </CardSection>
        )}
      </Card>
      {!hasSearchResult && <NoSearchResults />}
      <style jsx>
        {`
          .autocompleteWrapper {
            width: 100%;
            max-width: 740px;
            border-radius: 3px;
            position: absolute;
            box-shadow: 0 4px 12px 0 rgba(23, 27, 30, 0.3);
            background-color: #ffffff;
            z-index: 11;
          }
        `}
      </style>
    </div>
  ) : (
    !omitDuplicatedResultsCards && <ResultsCards faqs={faqs} />
  );
};

export default withRouter(FullpageResult);