import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import PropTypes from 'prop-types';
import ContentDropdown from '../ContentDropdown';

export const ContentTemplate = ({ content }) => (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div>
            <h2 style={{ margin: '0 0 8px 0' }}>{content}</h2>
            <p style={{ margin: 0, fontWeight: 'lighter' }}>Other details</p>
        </div>
        <div>
            <h3 style={{ margin: 0 }}>Starting at $999.99</h3>
        </div>
    </div>
);

export const items = [
    {
        id: 'item-1',
        content: <ContentTemplate content="iPhone 13 mini" />
    },
    {
        id: 'item-2',
        content: <ContentTemplate content="iPhone 13" />
    },
    {
        id: 'item-3',
        content: <ContentTemplate content="iPhone 13 plus ultra" />
    }
];

<Meta title="Atoms (Preview)/ContentDropdown" component={ContentDropdown} />

# ContentDropdown
<br />

## `ContentDropdowns` are used to display content in a dropdown like layout.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ContentDropdown
            label="Dropdown label"
            items={items}
        />
        <h3>Other content outside of the dropdown</h3>
    </Story>
</Canvas>


### With selected item
<Canvas>
    <Story name="With selected item">
        <ContentDropdown
            label="Dropdown label"
            items={items}
            selectedItemId="item-2"
        />
        <h3>Other content outside of the dropdown</h3>
    </Story>
</Canvas>

### With disabled item
<Canvas>
    <Story name="With disabled items">
        <ContentDropdown
            label="Dropdown label"
            items={items.map(item => ({ ...item, isDisabled: true }))}
        />
        <h3>Other content outside of the dropdown</h3>
    </Story>
</Canvas>

### With selected content override
<Canvas>
    <Story name="With selected content override">
        <ContentDropdown
            label="Dropdown label"
            items={items}
            selectedItemId="item-2"
            selectedItemContentOverride={<h2 style={{ margin: 0 }}>iPhone 13</h2>}
        />
        <h3>Other content outside of the dropdown</h3>
    </Story>
</Canvas>

### With initiallyOpen set to false
<Canvas>
    <Story name="With initiallyOpen set to false">
        <ContentDropdown
            label="Dropdown label"
            items={items}
            selectedItemId="item-2"
            initiallyOpen={false}
        />
        <h3>Other content outside of the dropdown</h3>
    </Story>
</Canvas>

### With non node values
<Canvas>
    <Story name="With non node values">
        <ContentDropdown
            label="Dropdown label"
            items={[
                {
                    id: '1',
                    content: 123
                },
                {
                    id: '2',
                    content: 'A string'
                },
                {
                    id: '3',
                    content: undefined
                },
                {
                    id: '3',
                    content: null
                }
            ]}
        />
        <h3>Other content outside of the dropdown</h3>
    </Story>
</Canvas>

## Usage Example

```jsx
import ContentDropdown from '@appdirect/sfb-theme-components/src/atoms/content-dropdown/ContentDropdown';

<ContentDropdown
    label="Dropdown label"
    items={[
        {
            id: 'item-1',
            content: <h1>Item 1</h1>
        },
        {
            id: 'item-2',
            content: <h1>Item 2</h1>
        }
    ]}
    selectedItemId="item-2"
    initiallyOpen={false}
/>

```
## Props

<ArgsTable of={ContentDropdown} />
