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

import { MediaSizeProvider } from '../../../_utils/mediaSizeProvider'
import { SECTIONS } from '../../../_utils/taxonomy'
import { AutoCompleteExample } from '../../../autoComplete/AutoCompleteExample'
import { SearchForm } from '../../../searchForm'
import { HeroSection } from './HeroSection'
import carpoolBlaBlaBusLarge from './images-for-stories/carpool-bbb-large.svg'
import carpoolBlaBlaBusSmall from './images-for-stories/carpool-bbb-small.svg'
import carpoolBlueBusLarge from './images-for-stories/carpool-blue-bus-large.svg'
import carpoolBlueBusSmall from './images-for-stories/carpool-blue-bus-small.svg'
import carpoolCoralBusLarge from './images-for-stories/carpool-coral-bus-large.svg'
import carpoolCoralBusSmall from './images-for-stories/carpool-coral-bus-small.svg'
import carpoolOnlyLarge from './images-for-stories/carpool-large.svg'
import carpoolOnlySmall from './images-for-stories/carpool-small.svg'

<Meta title={`${SECTIONS}/HeroSection`} />

# **HeroSection**

The hero section for a landing page.

export const bottomElement = (
  <SearchForm
    onSubmit={() => {}}
    autocompleteFromPlaceholder="Leaving From"
    autocompleteToPlaceholder="Going to"
    renderAutocompleteFrom={props => <AutoCompleteExample {...props} />}
    renderAutocompleteTo={props => <AutoCompleteExample {...props} />}
    datepickerProps={{
      defaultValue: new Date().toISOString(),
      format: value => new Date(value).toLocaleDateString(),
    }}
    stepperProps={{
      defaultValue: 1,
      min: 1,
      max: 8,
      title: 'Choose your number of seats',
      increaseLabel: 'Increase the number of seats by 1',
      decreaseLabel: 'Decrease the number of seats by 1',
      format: value => `${value} seat(s)`,
      confirmLabel: 'Submit',
    }}
  />
)

export const ILLUSTRATIONS = {
  'carpool-bla-bla-bus': {
    large: carpoolBlaBlaBusLarge,
    small: carpoolBlaBlaBusSmall,
  },
  'carpool-blue-bus': {
    large: carpoolBlueBusLarge,
    small: carpoolBlueBusSmall,
  },
  'carpool-coral-bus': {
    large: carpoolCoralBusLarge,
    small: carpoolCoralBusSmall,
  },
  'carpool-only': {
    large: carpoolOnlyLarge,
    small: carpoolOnlySmall,
  },
}

export const Component = ({ content }) => content()

<Canvas>
  <Story name="Default">
    <Component
      content={() => {
        const illustration = select(
          'Illustration',
          ILLUSTRATIONS,
          ILLUSTRATIONS['carpool-bla-bla-bus'],
          'Illustrations',
        )
        return (
          <MediaSizeProvider>
            <HeroSection
              heroText={text('heroText', 'Et vous, qui allez-vous retrouver ?', 'Illustrations')}
              heroImageUrlSmall={illustration.small}
              heroImageUrlLarge={illustration.large}
              bottomElement={bottomElement}
            />
          </MediaSizeProvider>
        )
      }}
    />
  </Story>
</Canvas>

## Specifications

## Usage

```jsx
import { HeroSection, HeroSectionProps } from '@blablacar/ui-library/build/heroSection'
```

<ArgsTable of={HeroSection} />