import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { boolean, number, text, select } from '@storybook/addon-knobs'
import AvatarRow from './AvatarRow'
import { generateAvatarList } from '../../utilities/specs/avatar.specs'
import { Resizable } from 're-resizable'
import { AvatarRowPlayground } from './AvatarRow.storiesHelpers'

<Meta
  title="Components/Structural/AvatarRow"
  component={AvatarRow}
  parameters={{
    design: {
      type: 'figma',
      url: '',
    },
  }}
/>

# AvatarRow

Component useful when you need to display a bunch of `<Avatar />`s in a row in a uniform manner with the (optional) ability to adapt how many should be displayed on screen depending on the container width where it lives.

## Avatars

### Individual props

In contrast with `AvatarList`, this component doesn't take `children` to render individual `Avatar` instead it takes an array of objects, each one with the individual properties for each `Avatar`:

```js
avatars = [
  {
    id: '001',
    image: 'some_image_path',
    name: 'McNulty',
  },
]
```

Any prop that `Avatar` takes, you can put in there, but...

### Group props

The purpose of this component is to create a row of uniform `Avatars`, for example the size should be the same for all, among other characteristics.

You can pass any `Avatar` prop directly on the component, and in turn this will be passed to each `Avatar`:

```jsx
<AvatarRow
  avatars={[
    {
      id: '001',
      image: 'some_image_path',
      name: 'McNulty',
    },
    {
      id: '002',
      image: 'some_image_path',
      name: 'Bunk',
      tooltipProps: { title: 'Bunk' },
    },
  ]}
  size="lg"
/>
```

If something should apply to every avatar, put that avatar prop directly on `AvatarRow`, if it's an individual prop, put it on each avatar item in the array.

Example: Any avatar prop works, so if you want tooltips... go for it, since you most likely want different content on the tooltip of each element, put it in each item of the array so you can have access to a specific field (like "name"), putting it directly on `AvatarRow` would apply the same tooltip content on all the avatars, as you'd expect.

> Props directly on `AvatarRow` beat props on the individual avatar.

Yes, you can make a bit of a mess if you wanted to (why would you though? why?), but in order to keep the component simple and avoid having to list and unlist which props are "allowed" on which scenario, we decided it was better to trust your sense.

## Adaptable

### ResizeObserver

By default the component will use a [ResizeObserver](https://caniuse.com/resizeobserver) to calculate how many avatars to display and when. This works in all scenarios, whether the change in available width is due to resizing the window or anything else.

<Canvas>
  <Story name="default">
    <span>
      Resize the window or the purple box dragging from its right border
    </span>
    <br />
    <br />
    <Resizable
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        outline: 'solid 1px #444cf770',
        backgroundColor: '#e5e5f730',
        backgroundImage: 'radial-gradient(#444cf770 0.5px, #e5e5f730 0.5px)',
        backgroundSize: '10px 10px',
      }}
      defaultSize={{
        width: '50%',
        height: 200,
      }}
    >
      <AvatarRow avatars={generateAvatarList(6)} />
    </Resizable>
  </Story>
</Canvas>

#### Reference

- **Designer**:
- **Engineering**:
- **Usage**:

<br />
<br />

### Props

<ArgsTable of={AvatarRow} />

## Stories

#### Dynamic number of avatars

<Canvas>
  <Story name="Dynamic number of avatars">
    <span>
      Resize the window or the purple box dragging from its right border
    </span>
    <br />
    <br />
    <AvatarRowPlayground />
  </Story>
</Canvas>
