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

import { color } from '../_utils/branding'
import { MediaSizeProvider } from '../_utils/mediaSizeProvider'
import { EDITORIAL } from '../_utils/taxonomy'
import { AutoCompleteExample } from '../autoComplete/AutoCompleteExample'
import { Loader, LoaderLayoutMode } from '../loader'
import { SearchForm, SearchFormDisplay } from '../searchForm'
import { Text, TextDisplayType } from '../text'
import { PriceSimulator } from './index'

<Meta title={`${EDITORIAL}/PriceSimulator`} />

# **PriceSimulator**

<Canvas>
  <Story name="Default">
    <MediaSizeProvider>
      <PriceSimulator
        title="Become a BlaBlaCar driver and save money by sharing your travel fees"
        illustration={<img src="https://cdn.blablacar.com/kairos/assets/build/images/astronaut-79c2cfcb1a66f7c9afc1bbc50f0037fd.svg" alt="" />}
        terms={<span>Receive a €25 fuel voucher with BlaBlaCar and €15 fuel voucher with BlaBlaCar daily after your first trip as a driver with at least a passenger on BlaBlaCar and BlaBlaCar Daily (<a href="https://www.blablacar.fr">terms</a>)</span>}
      >
        <SearchForm
          onSubmit={() => {}}
          initialFrom="Paris"
          initialTo="Toulouse"
          disabledFrom={false}
          disabledTo={false}
          autocompleteFromPlaceholder="Leaving From"
          autocompleteToPlaceholder="Going to"
          renderAutocompleteFrom={props => <AutoCompleteExample {...props} embeddedInSearchForm />}
          renderAutocompleteTo={props => <AutoCompleteExample {...props} embeddedInSearchForm />}
          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',
          }}
          submitButtonText="Publish a ride"
          display={SearchFormDisplay.SMALL}
          showDateField={false}
          addon={<Text display={TextDisplayType.DISPLAY1}>Save up to <Text display={TextDisplayType.DISPLAY1} textColor={color.blue}>€40</Text> on your first trip!</Text>}
        />
      </PriceSimulator>
    </MediaSizeProvider>
  </Story>
</Canvas>

<Canvas>
  <Story name="Loading">
    <MediaSizeProvider>
      <PriceSimulator
        title="Become a BlaBlaCar driver and save money by sharing your travel fees"
        illustration={<img src="https://cdn.blablacar.com/kairos/assets/build/images/astronaut-79c2cfcb1a66f7c9afc1bbc50f0037fd.svg" alt="" />}
        terms={<span>Receive a €25 fuel voucher with BlaBlaCar and €15 fuel voucher with BlaBlaCar daily after your first trip as a driver with at least a passenger on BlaBlaCar and BlaBlaCar Daily (<a href="https://www.blablacar.fr">terms</a>)</span>}
      >
        <SearchForm
          onSubmit={() => {}}
          initialFrom="Paris"
          initialTo="Toulouse"
          disabledFrom={false}
          disabledTo={false}
          autocompleteFromPlaceholder="Leaving From"
          autocompleteToPlaceholder="Going to"
          renderAutocompleteFrom={props => <AutoCompleteExample {...props} embeddedInSearchForm />}
          renderAutocompleteTo={props => <AutoCompleteExample {...props} embeddedInSearchForm />}
          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',
          }}
          submitButtonText="Publish a ride"
          display={SearchFormDisplay.SMALL}
          showDateField={false}
          addon={<Loader layoutMode={LoaderLayoutMode.BLOCK} />}
        />
      </PriceSimulator>
    </MediaSizeProvider>
  </Story>
</Canvas>

<Canvas>
  <Story name="with default image">
    <MediaSizeProvider>
      <PriceSimulator title="Become a BlaBlaCar driver and save money by sharing your travel fees">
        <SearchForm
          onSubmit={() => {}}
          initialFrom="Paris"
          initialTo="Toulouse"
          disabledFrom={false}
          disabledTo={false}
          autocompleteFromPlaceholder="Leaving From"
          autocompleteToPlaceholder="Going to"
          renderAutocompleteFrom={props => <AutoCompleteExample {...props} embeddedInSearchForm />}
          renderAutocompleteTo={props => <AutoCompleteExample {...props} embeddedInSearchForm />}
          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',
          }}
          submitButtonText="Publish a ride"
          display={SearchFormDisplay.SMALL}
          showDateField={false}
          addon={<Text display={TextDisplayType.DISPLAY1}>Save up to <Text display={TextDisplayType.DISPLAY1} textColor={color.blue}>€40</Text> on your first trip!</Text>}
        />
      </PriceSimulator>
    </MediaSizeProvider>
  </Story>
</Canvas>

## Specifications

## Usage

```jsx
import { PriceSimulator } from '@blablacar/ui-library/build/priceSimulator'
import { SearchForm, SearchFormDisplay } from '../searchForm'

<PriceSimulator
  title=""
  illustration={<img src="" alt="" />}>
  terms=""/>

  <SearchForm display={SearchFormDisplay.SMALL}/>
</PriceSimulator>
```

<ArgsTable of={PriceSimulator} />