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

import { RideAxis } from '../../../_utils/rideAxis'
import { SECTIONS } from '../../../_utils/taxonomy'
import { HighlightSection } from './index'

export const featured = [
  {
    id: '11',
    label: 'Toulouse',
    data: '8,99 €',
    href: '#',
    ariaLabel: 'Aria label',
  },
  {
    id: '22',
    label: <RideAxis from="Grenoble" to="Aéroport Lyon-Saint Exupéry" />,
    data: '16,99 €',
    href: '#',
    ariaLabel: 'Aria label',
  },
  {
    id: '33',
    label: <RideAxis from="Bus Paris" to="Lille" />,
    data: '18,99 €',
    href: '#',
    ariaLabel: 'Aria label',
  },
  {
    id: '44',
    label: <RideAxis from="Aéroport Lyon-Saint Exupéry" to="Lyon" />,
    data: '8,99 €',
    href: '#',
    ariaLabel: 'Aria label',
  },
  {
    id: '55',
    label: <RideAxis from="Aéroport Lyon-Saint Exupéry" to="Cannes" />,
    data: '8,99 €',
    href: '#',
    ariaLabel: 'Aria label',
  },
  {
    id: '66',
    label: 'Tous les trajet en bus',
    data: '',
    href: '#',
    ariaLabel: 'Aria label',
  },
]

export const optional = [
  {
    id: '1',
    label: 'Madrid',
    href: '#',
    ariaLabel: 'Aria label',
  },
  {
    id: '2',
    label: 'Barcelona',
    href: '#',
    ariaLabel: 'Aria label',
  },
  {
    id: '3',
    label: 'Guernica',
    href: '#',
    ariaLabel: 'Aria label',
  },
  {
    id: '4',
    label: 'Alicante',
    href: '#',
    ariaLabel: 'Aria label',
  },
  {
    id: '5',
    label: 'Sevilla',
    href: '#',
    ariaLabel: 'Aria label',
  },
  {
    id: '6',
    label: 'Tous les villes en bus',
    href: '#',
    ariaLabel: 'Aria label',
  },
]

export const highlights = {
  featured: { heading: 'Top trajets en bus', items: featured },
  optional: { heading: 'Top villes en bus', items: optional },
}

export const featuredOnly = {
  featured: { heading: 'Top trajets en bus', items: featured },
}


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

# HighlightSection

## Featured and optional items

<Canvas>
  <Story name="with featured and optional items">
    <HighlightSection
      highlights={highlights}
      toggle={{
        on: 'Show more',
        off: 'Show less',
      }}
    />
  </Story>
</Canvas>

## Featured items only

<Canvas>
  <Story name="with featured items only">
    <HighlightSection
      highlights={featuredOnly}
      toggle={{
        on: 'Show more',
        off: 'Show less',
      }}
    />
  </Story>
</Canvas>

## Specifications

`HighlightSection` is applied featuredly on Landing Pages to **highlight common axes and/or destinations**.
It's divided on two sections. It receives data and handles its display.

> _SEO_
>
> Content should not be completely hidden from the DOM. It uses CSS to handle visibility

### Behavior

It follows a _Grid System_: from 1 column stacked moving up to 3 equal columns.

## Components

`HighlightSection` was split in several small components: `HighlightSectionElements`

#### Link

Action button/link for toggling collapse mode. It has on/off state

## Usage

```jsx
import { HighlightSection } from '@blablacar/ui-library/build/layout/section/highlightSection'

const highlights = {
  optional: {
    heading: 'Destinations heading'
    items: [ {
    id: '11',
    label: 'Toulouse',
    data: '8,99 €',
    href: '#',
    ariaLabel: 'Aria label',
  }]
},
featured: {
   heading: 'Axes heading'
    items: [ {
    id: '11',
    label: 'Toulouse',
    data: '8,99 €',
    href: '#',
    ariaLabel: 'Aria label',
  }]
}}

<HighlightSection
  highlights={highlights}
  toggle={{
    on: 'Show more',
    off: 'Show less',
  }}
/>
```

<ArgsTable of={HighlightSection} />