import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { object } from '@storybook/addon-knobs';
import ChildrenOrderableContainer from '../ChildrenOrderableContainer';
import { headerAnnouncementBarSettingsMock,
    headerNavigationBarSettingsMock,
    headerHomeBarSettingsMock,
    headerAuxiliaryBarSettingsMock,
    headerNavigationBarDataMock,
    headerHomeBarDataMock,
    headerAuxiliaryBarDataMock,
    headerOrderableComponentsMock } from '../../../../mocks/components/header';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';

export const defaultOrderableComponents = [{
    id: headerOrderableComponentsMock.find(comp => comp.name === 'HeaderAnnouncementBar').id,
    name: 'HeaderAnnouncementBar',
    data: {},
    settings: headerAnnouncementBarSettingsMock
}, {
    id: headerOrderableComponentsMock.find(comp => comp.name === 'HeaderHomeBar').id,
    name: 'HeaderHomeBar',
    data: headerHomeBarDataMock,
    settings: headerHomeBarSettingsMock
}, {
    id: headerOrderableComponentsMock.find(comp => comp.name === 'HeaderAuxiliaryBar').id,
    name: 'HeaderAuxiliaryBar',
    data: headerAuxiliaryBarDataMock,
    settings: headerAuxiliaryBarSettingsMock
}, {
    id: headerOrderableComponentsMock.find(comp => comp.name === 'HeaderNavigationBar').id,
    name: 'HeaderNavigationBar',
    data: headerNavigationBarDataMock,
    settings: headerNavigationBarSettingsMock
}];

export const childrenOrderableContainerData = () => object('Orderable Components', defaultOrderableComponents);

<Meta title="Components/Children Orderable Container" component={ChildrenOrderableContainer} />

# ChildrenOrderableContainer
<br />

## `ChildrenOrderableContainer` are used to list and reorder nested orderable components.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ChildrenOrderableContainer childrenOrderableComponents={childrenOrderableContainerData()} />
    </Story>
</Canvas>


## Usage Example
<CollapsibleJsonSnippet
    summary="ChildrenOrderableContainerData"
    code={childrenOrderableContainerData()}
/>

```jsx
import PageOrderableContainer from
'@appdirect/sfb-theme-components/src/components/children-orderable-container/ChildrenOrderableContainer';
<ChildrenOrderableContainer childrenOrderableComponents={childrenOrderableContainerData} />
```
## Props

<ArgsTable of={ChildrenOrderableContainer} />
