@kiwicom/smart-faq/src/shared/StaticFAQ/FAQExtraInfo/BaggageInfo/BaggageDescription.js

// @flow

import * as React from 'react';
import { graphql, createFragmentContainer } from 'react-relay';
import {
  BaggageCabin,
  BaggageChecked,
  BaggagePersonalItem,
} from '@kiwicom/orbit-components/lib/icons';
import Translate from '@kiwicom/nitro/lib/components/Translate';

import type { BaggageDescription as BaggageDescriptionProps } from './__generated__/BaggageDescription.graphql';

type Props = {|
  data: BaggageDescriptionProps,
|};

function renderIcon(category: ?string) {
  switch (category) {
    case 'CABIN_BAG':
      return <BaggageCabin size="medium" customColor="#bac7d5" />;
    case 'CHECKED':
      return <BaggageChecked size="medium" customColor="#bac7d5" />;
    case 'PERSONAL_ITEM':
      return <BaggagePersonalItem size="medium" customColor="#bac7d5" />;
  }
  return null;
}

function formatCategory(category: ?string) {
  switch (category) {
    case 'CABIN_BAG':
      return <Translate t="smartfaq.baggage_info.cabin_bag" />;
    case 'CHECKED':
      return <Translate t="smartfaq.baggage_info.checked_baggage" />;
    case 'PERSONAL_ITEM':
      return <Translate t="smartfaq.baggage_info.personal_item" />;
  }
  return null;
}

export const BaggageDescription = ({ data: { bag, quantity } }: Props) => {
  if (!bag) {
    return null;
  }
  const { height, weight, width, length, category } = bag;

  return (
    <>
      <hr className="separationLine" />
      <div className="baggageRow">
        <p className="quantity">{quantity}x</p>
        {renderIcon(category)}
        <p className="baggageWeight">
          {formatCategory(category)} {weight} kg
        </p>
        <div className="baggageSize">
          {height && width && length ? (
            <p>
              {height} x {width} x {length} cm
            </p>
          ) : null}
        </div>
      </div>
      <style jsx>
        {`
          p {
            margin: 0px;
          }
          div.baggageRow {
            padding: 5px 24px 5px 24px;
          }
          div.baggageSize {
            display: inline-block;
            float: right;
          }
          div.baggageSize p {
            font-size: 12px;
            line-height: 1.4;
            color: #46515e;
          }
          p.baggageWeight {
            margin-left: 5px;
            font-size: 14px;
            font-weight: bold;
            line-height: 1.4;
            color: #46515e;
            display: inline-block;
          }
          p.quantity {
            font-size: 14px;
            display: inline-block;
            margin-right: 8px;
          }
          hr.separationLine {
            height: 1px;
            background-color: #e8edf1;
            border: none;
          }
          :global([dir='rtl']) div.baggageSize {
            direction: ltr;
            position: absolute;
            left: 65px;
          }
        `}
      </style>
    </>
  );
};

export default createFragmentContainer(
  BaggageDescription,
  graphql`
    fragment BaggageDescription on BookingBaggage {
      bag {
        height
        weight
        width
        length
        note
        category
      }
      quantity
    }
  `,
);