@kiwicom/smart-faq/src/SmartFAQ/AllBookings/BookingCard/FromToRow.js

// @flow

import * as React from 'react';
import { graphql, createFragmentContainer } from 'react-relay';
import { Stack, Heading } from '@kiwicom/orbit-components';
import {
  FlightReturn,
  FlightDirect,
  FlightMulticity,
} from '@kiwicom/orbit-components/lib/icons';
import { withTheme } from 'styled-components';
import type { ThemeProps } from '@kiwicom/nitro/lib/records/Theme';

import bookingTypes from '../../common/booking/bookingTypes';
import type { FromToRow_arrival as FromToRowArrivalType } from './__generated__/FromToRow_arrival.graphql';
import type { FromToRow_departure as FromToRowDepartureType } from './__generated__/FromToRow_departure.graphql';

type Props = {
  type: string,
  departure: FromToRowDepartureType,
  arrival: FromToRowArrivalType,
  ...ThemeProps,
};

function renderFlightIcon(type: string, color: string) {
  switch (type) {
    case bookingTypes.ONE_WAY:
      return <FlightDirect reverseOnRtl size="medium" customColor={color} />;
    case bookingTypes.RETURN:
      return <FlightReturn reverseOnRtl size="medium" customColor={color} />;
    case bookingTypes.MULTICITY:
      return <FlightMulticity reverseOnRtl size="medium" customColor={color} />;
  }
  return null;
}

const RawFromToRow = (props: Props) => {
  const origin = props.departure?.airport?.city?.name ?? '';
  const destination = props.arrival?.airport?.city?.name ?? '';
  const IATAOrigin = props.departure?.airport?.locationId ?? '';
  const IATADestination = props.arrival?.airport?.locationId ?? '';
  const type = props.type;
  const color = props.theme?.orbit?.paletteInkLighter;

  return (
    <Heading type="title3">
      <Stack inline wrap spacing="tight" align="center" spaceAfter="normal">
        <span>{origin}</span>
        <span>{IATAOrigin}</span>
        <span className="flightDirectionIcon">
          {renderFlightIcon(type, color)}
        </span>
        <span>{destination}</span>
        <span>{IATADestination}</span>
      </Stack>
    </Heading>
  );
};

export const FromToRow = withTheme(RawFromToRow);

export default createFragmentContainer(FromToRow, {
  arrival: graphql`
    fragment FromToRow_arrival on RouteStop {
      airport {
        locationId
        city {
          name
        }
      }
    }
  `,
  departure: graphql`
    fragment FromToRow_departure on RouteStop {
      airport {
        locationId
        city {
          name
        }
      }
    }
  `,
});