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

// @flow

import * as React from 'react';
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 styled from 'styled-components';

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

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

const AutoCompleteWrapper = styled.div`
  width: 100%;
  max-width: 740px;
  border-radius: 3px;
  position: absolute;
  box-shadow: 0 4px 12px 0 rgba(23, 27, 30, 0.3);
  background-color: #fff;
  z-index: 11;
`;

const SearchAutocomplete = ({ faqs, history, urlSearchParam }: Props) => {
  const { searchText, clearSearch } = React.useContext(SearchState);
  const searchQuery = urlSearchParam ? urlSearchParam : searchText;
  const hasSearchResult = faqs.length > 0;

  function handleClickOnAllResults() {
    history.push(`/faq/search/${searchQuery}`);
    clearSearch();
  }

  return (
    <AutoCompleteWrapper>
      <Card>
        {hasSearchResult &&
          faqs.map(faq => (
            <SearchAutocompleteCard key={faq.id} article={faq} />
          ))}
        {faqs.length >= 5 && (
          <CardSection dataTest="seeAllResults">
            <div
              style={{ cursor: 'pointer' }}
              onClick={handleClickOnAllResults}
            >
              <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>
          </CardSection>
        )}
      </Card>
      {!hasSearchResult && <NoSearchResults />}
    </AutoCompleteWrapper>
  );
};

export default withRouter(SearchAutocomplete);