@kiwicom/smart-faq/src/shared/StaticFAQ/breadcrumbs/CustomBreadcrumbs.js

// @flow

import * as React from 'react';
import MediaQuery from 'react-responsive';

import Breadcrumb from './Breadcrumb';
import BackArrow from './BackArrow';
import { Desktop } from '../../../SmartFAQ/common/Responsive';
import { FullPageVersion } from '../../../SmartFAQ/common/PageVariant';
import { BookingState } from '../../../SmartFAQ/context/BookingState';
import { withToken } from '../../../SmartFAQ/context/User';

type Props = {|
  loginToken: ?string,
  simpleToken: ?string,
  kwAuthToken: ?string,
  breadcrumbs: Array<{ +id?: string, +title: ?string }>,
|};

class CustomBreadcrumbs extends React.Component<Props> {
  renderBreadCrumbs = (breadcrumbs, maxBreadcrumbsLength) => {
    const breadcrubsLength = breadcrumbs.map(b => b.title).join().length;
    let breadcrumbsToRender = breadcrumbs;
    if (maxBreadcrumbsLength && breadcrubsLength > maxBreadcrumbsLength) {
      const length = breadcrumbs.length;
      breadcrumbsToRender = breadcrumbs.map((b, i) => {
        if (i !== 0 && i !== length - 1 && i !== length - 2) {
          return { ...b, title: '...' };
        }
        return b;
      });
    }
    return breadcrumbsToRender
      .slice(1, breadcrumbsToRender.length - 1)
      .map(breadcrumb =>
        breadcrumb.title ? (
          <Breadcrumb
            key={breadcrumb.id}
            breadcrumb={{ id: breadcrumb.id, title: breadcrumb.title }}
          />
        ) : null,
      );
  };

  render() {
    const { breadcrumbs, loginToken, simpleToken, kwAuthToken } = this.props;
    const firstCategory = [...breadcrumbs].shift();
    const lastCategory = [...breadcrumbs].pop();
    const previousCategory = [...breadcrumbs].slice(-2)[0];
    const id = previousCategory && previousCategory.id;
    const isLoggedIn = loginToken || simpleToken || kwAuthToken;

    const maxBreadcrumbsLengthMobile = 55;

    return (
      <div className="breadcrumbs" data-cy="faq-breadcrumbs">
        <BookingState.Consumer>
          {({ showBooking }) => {
            if (isLoggedIn && showBooking) {
              return (
                <Desktop>
                  <span data-test="back-button">
                    <BackArrow id={id} />
                  </span>
                </Desktop>
              );
            }

            return null;
          }}
        </BookingState.Consumer>
        <FullPageVersion>
          <span data-test="back-button">
            <BackArrow id={id} />
          </span>
        </FullPageVersion>
        {firstCategory.title && (
          <Breadcrumb breadcrumb={{ title: firstCategory.title }} />
        )}
        <MediaQuery maxWidth="600px">
          {this.renderBreadCrumbs(breadcrumbs, maxBreadcrumbsLengthMobile)}
        </MediaQuery>
        <MediaQuery minWidth="600px">
          {this.renderBreadCrumbs(breadcrumbs)}
        </MediaQuery>
        {lastCategory.title && (
          <Breadcrumb breadcrumb={{ title: lastCategory.title }} isCurrent />
        )}
        <style jsx>{`
          :global([dir='rtl']) & {
            margin-left: 16px;
          }
          .breadcrumbs {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            margin-bottom: 24px;
          }
          @media only screen and (max-width: 901px) {
            .breadcrumbs {
              padding: 30px 16px;
              margin-bottom: 0px;
            }
          }
        `}</style>
      </div>
    );
  }
}

export default withToken(CustomBreadcrumbs);