@kiwicom/smart-faq/src/SmartFAQ/SingleBookingPage/bookingItem/Header.js

// @flow

import * as React from 'react';
import { withRouter } from 'react-router-dom';
import { graphql, createFragmentContainer } from 'react-relay';
// $FlowExpectedError: Flow types are broken in TextNode
import TextNode from '@kiwicom/nitro/lib/components/TextNode';
import styled from 'styled-components';
import defaultTheme from '@kiwicom/orbit-components/lib/defaultTheme';

import OneWayBookingHeader from './BookingHeaders/OneWay';
import ReturnBookingHeader from './BookingHeaders/Return';
import MulticityBookingHeader from './BookingHeaders/Multicity';
import formatBookingId from '../../helpers/formatBookingId';
import bookingTypes from '../../common/booking/bookingTypes';
import { BookingBadgeStatus } from '../../common/booking/bookingStatuses';
import SelectAnotherBookingLink from '../../common/booking/SelectAnotherBookingLink';
import type { Header_booking as HeaderBookingType } from './__generated__/Header_booking.graphql';

type Props = {|
  booking: HeaderBookingType,
  isFuture: boolean,
|};

const HeaderTitle = styled.div`
  margin-bottom: ${defaultTheme.orbit.spaceXXSmall};
`;

const HeaderAbove = styled(HeaderTitle)`
  display: flex;
  justify-content: space-between;
`;

const HeaderBelow = styled.div`
  margin-bottom: ${defaultTheme.orbit.spaceMedium};
`;

function renderHeaderTitleByType(type: string, booking: HeaderBookingType) {
  switch (type) {
    case bookingTypes.ONE_WAY:
      return <OneWayBookingHeader booking={booking} />;
    case bookingTypes.RETURN:
      return <ReturnBookingHeader booking={booking} />;
    case bookingTypes.MULTICITY:
      return <MulticityBookingHeader booking={booking} />;
  }
  return null;
}

const Header = (props: Props) => {
  const { booking, isFuture } = props;
  const { type } = booking;

  return (
    <>
      <HeaderAbove>
        <TextNode
          type="secondary"
          dataTest="booking-type"
          t={
            isFuture
              ? __('smartfaq.single_booking_page.header.booking_id.upcoming')
              : __('smartfaq.single_booking_page.header.booking_id.past')
          }
          values={{
            booking_id: (
              <span dir="ltr" key={booking.databaseId ?? 0}>
                {formatBookingId(booking.databaseId ?? 0)}
              </span>
            ),
          }}
        />
        <SelectAnotherBookingLink />
      </HeaderAbove>
      <HeaderTitle data-cy="booking-title">
        {type && renderHeaderTitleByType(type, booking)}
      </HeaderTitle>
      <HeaderBelow>
        {booking.status && <BookingBadgeStatus status={booking.status} />}
      </HeaderBelow>
    </>
  );
};

export default createFragmentContainer(
  withRouter(Header),
  graphql`
    fragment Header_booking on BookingInterface {
      type: __typename
      status
      databaseId: id(opaque: false)
      ...OneWay_booking
      ...Return_booking
      ...Multicity_booking
    }
  `,
);