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

import { MediaSizeProvider } from '../_utils/mediaSizeProvider'
import { APP } from '../_utils/taxonomy'
import { AutoCompleteExample } from '../autoComplete/AutoCompleteExample'
import { BaseSection, SectionContentSize } from '../layout/section/baseSection'
import { TheVoice } from '../theVoice'
import { SearchForm, SearchFormDisplay } from './index'

<Meta title={`${APP}/SearchForm`} />

# **SearchForm**

<Canvas>
  <Story name="SearchForm">
    <MediaSizeProvider>
      <BaseSection contentSize={SectionContentSize.LARGE}>
        <SearchForm
          onSubmit={() => {}}
          initialFrom=""
          initialTo=""
          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',
          }}
        />
      </BaseSection>
    </MediaSizeProvider>
  </Story>
</Canvas>


<Canvas>
  <Story name="PriceSimulator">
    <div style={{ width: '400px', margin: '0 auto' }}>
    <MediaSizeProvider>
      <BaseSection contentSize={SectionContentSize.LARGE}>
        <SearchForm
          onChange={action('onChange')}
          onSubmit={action('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}
          showInvertButton={false}
          addon={<TheVoice>Save up to €40 on your first trip!</TheVoice>}
        />
      </BaseSection>
    </MediaSizeProvider>
    </div>
  </Story>
</Canvas>

## Specifications

- You can force the display to `SearchFormDisplay.LARGE` or `SearchFormDisplay.SMALL`. This display impacts the form when not focussed. Overlays & modals bahavior remains consistant with the viewport. The default behavior is responsive.
- The `submitButtonText` prop will only be used on small display.
- The `showDateField` prop can be used to hide the date field on small display
- The `addon` prop can only be used on small display

## Usage

```jsx
import { SearchForm } from '@blablacar/ui-library/build/searchForm'

import { AutoCompleteExample } from './AutoCompleteExample'
<SearchForm
  onSubmit={() => {}}
  initialFrom=""
  initialTo=""
  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',
  }}
/>
```

<ArgsTable of={SearchForm} />