import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks'

import { color } from '../../../_utils/branding'
import { RideAxis } from '../../../_utils/rideAxis'
import { PAGES } from '../../../_utils/taxonomy'
import { Avatar } from '../../../avatar'
import { ContentDivider } from '../../../divider/contentDivider'
import { BubbleIcon } from '../../../icon/bubbleIcon'
import { PetIcon } from '../../../icon/pet'
import { SmokeIcon } from '../../../icon/smokeIcon'
import { ItemAction } from '../../../itemAction'
import { ItemChoice } from '../../../itemChoice'
import { ItemData } from '../../../itemData'
import { ItemInfo } from '../../../itemInfo'
import { Itinerary } from '../../../itinerary'
import { LayoutNormalizer } from '../../../layout/layoutNormalizer'
import { BaseSection } from '../../../layout/section/baseSection'
import { SubHeader } from '../../../subHeader'
import { TheVoice } from '../../../theVoice'

<Meta title={`${PAGES}/Search results/Ride details/Carpool`} />


<Canvas>
  <Story name="Carpool">
    <React.Fragment>
      <LayoutNormalizer useLegacyNormalization={false} />
      <BaseSection noHorizontalSpacing>
        <TheVoice>Ven. 11 octobre</TheVoice>
      </BaseSection>
      <BaseSection>
        <Itinerary
          fromAddon="Paris"
          toAddon="Marseille"
          places={[
            {
              mainLabel: 'Gare routière de Bercy',
              subLabel: 'Paris',
              isoDate: '2017-12-11T09:00',
              time: '09:00',
              href: '#',
            },
            {
              mainLabel: 'Gare de Marseille Saint Charles',
              subLabel: 'Marseille',
              isoDate: '2017-12-11T20:00',
              time: '20:00',
              href: '#',
            },
          ]}
          small={false}
        />
      </BaseSection>
      <BaseSection noHorizontalSpacing>
        <ItemData data="17,50 €" mainTitle="Prix total pour 1 passager" />
        <ContentDivider />
        <ItemChoice label="Vince" rightAddon={<Avatar />} href="#" />
        <ItemAction
          action="Contacter Vince"
          leftAddon={<BubbleIcon iconColor={color.blue} />}
          href="#"
        />
        <ContentDivider />
        <ul>
          <ItemInfo mainTitle="Fumer nest pas autporisé dans la voiture." icon={<SmokeIcon />} />
          <ItemInfo mainTitle="Pas d'animaux dans la voiture." icon={<PetIcon />} />
        </ul>
        <ContentDivider />
      </BaseSection>
      <BaseSection>
        <SubHeader>Passagers</SubHeader>
      </BaseSection>
      <BaseSection noHorizontalSpacing>
        <ul>
          <ItemChoice
            label="Jessica"
            labelInfo={<RideAxis from="Paris" to="Rennes" />}
            rightAddon={<Avatar />}
            href="#"
          />
          <ItemChoice
            label="Joe"
            labelInfo={<RideAxis from="Paris" to="Lyon" />}
            rightAddon={<Avatar />}
            href="#"
          />
        </ul>
        <ContentDivider />
        <ItemAction action="Signaler ce trajet" href="#" />
      </BaseSection>
    </React.Fragment>
  </Story>
</Canvas>