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

// @flow

import * as React from 'react';
import { withRouter } from 'react-router-dom';
import type { ContextRouter } from 'react-router-dom';
import styled from 'styled-components';
import defaultTheme from '@kiwicom/orbit-components/lib/defaultTheme';

import FAQCategoryList from './FAQCategoryList';
import SearchAllFAQs from './SearchAllFAQs';
import { SearchState } from '../../SmartFAQ/context/SearchState';
import type { SearchStateType } from '../../SmartFAQ/context/SearchState';
import SearchBar from './SearchBar';
import { withToken } from '../../SmartFAQ/context/User';
import { BookingState } from '../../SmartFAQ/context/BookingState';
import ScrollableContent from '../../SmartFAQ/common/ScrollableContent';
import { Mobile, Desktop } from '../../SmartFAQ/common/Responsive';

const StaticFAQBody = styled.div`
  height: 100%;
  padding: ${({ theme }) =>
    `${theme.orbit.spaceLarge} ${theme.orbit.spaceXXLarge}`};
  @media only screen and (max-width: 900px) {
    padding: 0;
  }
`;

StaticFAQBody.defaultProps = {
  theme: defaultTheme,
};

const StaticFAQWrapper = styled.div`
  width: 100%;
  height: 100%;
  background-color: ${({ theme }) => theme.orbit.backgroundBody};
`;

StaticFAQWrapper.defaultProps = {
  theme: defaultTheme,
};

const StaticFAQSearch = styled.div`
  @media only screen and (max-width: 900px) {
    padding: ${({ theme }) => theme.orbit.spaceMedium};
    background-color: ${({ theme }) => theme.orbit.backgroundBody};
  }
  @media only screen and (min-width: 901px) {
    margin-bottom: ${({ theme }) => theme.orbit.spaceLarge};
  }
`;

StaticFAQSearch.defaultProps = {
  theme: defaultTheme,
};

type Props = {|
  ...ContextRouter,
  loginToken: ?string,
  simpleToken: ?string,
  kwAuthToken: ?string,
|};

const StaticFAQ = (props: Props) => {
  const { categoryId: queryParamCategory } = props.match.params;
  const categoryId = queryParamCategory ? Number(queryParamCategory) : null;
  const isLoggedIn = props.loginToken || props.simpleToken || props.kwAuthToken;

  return (
    <StaticFAQWrapper>
      <SearchState.Consumer>
        {({ searchText, isVisible }: SearchStateType) => (
          <BookingState.Consumer>
            {({ showBooking }) => {
              const isSearching = searchText.length > 0;
              const showSearchForLoggedOutUser = !isLoggedIn || !showBooking;

              return (
                <ScrollableContent styles="background-color: #f5f7f9">
                  <StaticFAQBody id="staticFAQBody">
                    {!categoryId && isVisible && showSearchForLoggedOutUser && (
                      <StaticFAQSearch>
                        <Desktop>
                          <SearchBar autofocus />
                        </Desktop>
                        <Mobile>
                          <SearchBar />
                        </Mobile>
                      </StaticFAQSearch>
                    )}
                    {isSearching ? (
                      <SearchAllFAQs search={searchText} isSidebarVersion />
                    ) : (
                      <FAQCategoryList categoryId={categoryId} />
                    )}
                  </StaticFAQBody>
                </ScrollableContent>
              );
            }}
          </BookingState.Consumer>
        )}
      </SearchState.Consumer>
    </StaticFAQWrapper>
  );
};

export default withToken(withRouter(StaticFAQ));