import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import ProductAssociatedDomain, { ProductAssociatedDomainComponent } from '../ProductAssociatedDomain';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import { productDomainAppMock } from '../../../../mocks/product/productDomainApp';
import { fetchSuggestionsMock, fetchEmptySuggestionsMock, failedFetchSuggestionsMock } from '../../../../mocks/product/domainSuggestionFetch';


<Meta
    title="Components/Product Associated Domain"
    component={ProductAssociatedDomain}
    parameters={{
        layout: 'fullscreen'
    }}
/>

# ProductAssociatedDomain
<br />

## `Product Associated Domain` are used to search, select and buy domains.
<br />

### Default
<Canvas>
    <Story name="Default">
        <div style={{ width: '100%' }}>
            <ProductAssociatedDomainComponent
                data={productDomainAppMock}
                fetchSuggestions={fetchSuggestionsMock}
            />
        </div>
    </Story>
</Canvas>

### Always empty suggestions
<Canvas>
    <Story name="Empty Suggestion">
        <div style={{ width: '100%' }}>
            <ProductAssociatedDomainComponent
                data={productDomainAppMock}
                fetchSuggestions={fetchEmptySuggestionsMock}
            />
        </div>
    </Story>
</Canvas>

### Failing fetch suggestions
<Canvas>
    <Story name="Failing fetch">
        <div style={{ width: '100%' }}>
            <ProductAssociatedDomainComponent
                data={productDomainAppMock}
                fetchSuggestions={failedFetchSuggestionsMock}
            />
        </div>
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="domainAppData"
    code={productDomainAppMock}
/>

```jsx
import ProductAssociatedDomain from
 '@appdirect/sfb-theme-components/src/components/product-associated-domain/ProductAssociatedDomain';

<ProductAssociatedDomain
    data={domainAppData}
/>

```

## Props
<ArgsTable of={ProductAssociatedDomain} />
