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

// @flow

import * as React from 'react';
import { createFragmentContainer, graphql } from 'react-relay';
import Card from '@kiwicom/orbit-components/lib/Card';
import CardSection, {
  CardSectionHeader,
  CardSectionContent,
} from '@kiwicom/orbit-components/lib/Card/CardSection';

import AccordionBody from './AccordionBody';
import AccordionHeader from './AccordionHeader';
import type { AccordionTripSummary_trip as AccordionTripSummaryType } from './__generated__/AccordionTripSummary_trip.graphql';
import LogClick from '../../../components/Log/LogClick';
import { events } from '../../../const/events';

type Props = {|
  trip: AccordionTripSummaryType,
|};

const Accordion = ({ trip }: Props) => {
  return (
    <LogClick event={events.BOOKING_OPEN_CARD}>
      {({ onClick }) => (
        <Card spaceAfter="medium" dataTest="trip">
          <CardSection expandable onExpand={onClick}>
            <CardSectionHeader>
              <AccordionHeader trip={trip} />
            </CardSectionHeader>
            <CardSectionContent>
              <AccordionBody legs={trip.legs} />
            </CardSectionContent>
          </CardSection>
        </Card>
      )}
    </LogClick>
  );
};

export default createFragmentContainer(
  Accordion,
  graphql`
    fragment AccordionTripSummary_trip on Trip {
      departure {
        localTime
        airport {
          locationId
          city {
            name
          }
        }
      }
      arrival {
        airport {
          locationId
          city {
            name
          }
        }
      }
      legs {
        airline {
          name
          code
          logoUrl
        }
        ...CarrierLogoWrapper_legs
        ...AccordionBody_legs
      }
    }
  `,
);