import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { getKnobs } from '../../../tools/knobsHelper';
import { orderConfirmationMockData } from '../../../../mocks/customer/orderConfirmation';
import OrderConfirmation from '../OrderConfirmation';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';

export const orderConfirmationSettings = {
    icon: 'Image uploader for the icon above the title',
    title: 'The text of the title',
    message: 'The text of the message under the title',
    viewApps: 'The text on the "ViewApps" button',
    viewAppsIcon: 'Image uploader for the icon on the "ViewApps" button',
    continueShopping: 'The text on the "continueShopping" button',
    continueShoppingIcon: 'Image uploader for the icon on the "continueShopping" button',
    assignProducts: 'The text on the "assignProducts" link',
    assignProductsIcon: 'Image uploader for the icon on the "assignProducts" link'
};

<Meta title="Components/Order Confirmations" component={OrderConfirmation} />

# OrderConfirmation
<br />

## `OrderConfirmations` are used to alert and confirm a user's order.
<br />

### Default
<Canvas>
    <Story name="Default">
        <OrderConfirmation data={orderConfirmationMockData} />
    </Story>
</Canvas>

### With Settings
<Canvas>
    <Story name="With Settings">
        <OrderConfirmation
            data={orderConfirmationMockData}
            settings={getKnobs(OrderConfirmation.schema().form)}
        />
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="orderConfirmationData"
    code={orderConfirmationMockData}
/>
<br />
<CollapsibleJsonSnippet
    summary="orderConfirmationSettings"
    code={getKnobs(OrderConfirmation.schema().form)}
/>

```jsx
import OrderConfirmation from '@appdirect/sfb-theme-components/src/components/order-confirmation/OrderConfirmation';

<OrderConfirmation data={orderConfirmationData} settings={orderConfirmationSettings} />
```
## Props
<ArgsTable of={OrderConfirmation} />

## Schema
### Form Settings
<table>
    <TableContentFromObject obj={orderConfirmationSettings} />
</table>

### Form Output
<FormOutput code={OrderConfirmation.schema().form} />
