import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { object } from '@storybook/addon-knobs';
import PageOrderableContainer from '../PageOrderableContainer';
import { sliderMockSettings } from '../../../../mocks/home/slider';
import { reviewsMock } from '../../../../mocks/product/reviews';
import { additionalInfoMock } from '../../../../mocks/product/additionalInfo';
import { carouselMockData } from '../../../../mocks/home/carousel';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';

export const defaultOrderableComponents = [{
    id: 'Slider:orderable:48b84b2c-dc0f-11ea-87d0-0242ac130003',
    name: 'Slider',
    ...sliderMockSettings
}, {
    id: 'Slider:orderable:6386f67e-dc0f-11ea-87d0-0242ac130003',
    name: 'Slider',
    ...sliderMockSettings
}, {
    id: 'Carousel:orderable:6a61530e-dc0f-11ea-87d0-0242ac130003',
    name: 'Carousel',
    settings: carouselMockData
}, {
    id: 'Slider:orderable:48b84b2c-dc0f-11ea-87d0-0242ac130004',
    name: 'Slider',
    ...sliderMockSettings
}, {
    id: 'Slider:orderable:6386f67e-dc0f-11ea-87d0-0242ac130004',
    name: 'Slider',
    ...sliderMockSettings
}, {
    id: 'ProductReviews:orderable:7d021438-3800-4fb9-9577-e809dcf15df7',
    name: 'ProductReviews',
    data: reviewsMock,
    settings: {}
}, {
    id: 'ProductAdditionalInfo:orderable:7d023338-3800-4fb9-9577-e809dcf15df7',
    name: 'ProductAdditionalInfo',
    data: additionalInfoMock,
    settings: {}
}];

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

<Meta title="Components/Page Orderable Container" component={PageOrderableContainer} />

# PageOrderableContainer
<br />

## `PageOrderableContainers` are used to list and reorder orderable components
<br />

### Default
<Canvas>
    <Story name="Default">
        <PageOrderableContainer orderableComponents={pageOrderableContainerData()} />
    </Story>
</Canvas>


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

```jsx
import PageOrderableContainer from
'@appdirect/sfb-theme-components/src/components/page-orderable-container/PageOrderableContainer';
<PageOrderableContainer orderableComponents={pageOrderableContainerData} />
```
## Props

<ArgsTable of={PageOrderableContainer} />
