import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { getKnobs } from '../../../tools/knobsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import { footerDataMock, footerMenusMock } from '../../../../mocks/components/footer';
import Footer from '../Footer';

export const settingsDocs = {
    layout: 'The type of layout for the layout (classic, newsletter & social, bottom bar, feature bar)',
    size: 'The padding value for the footer',
    copyright: 'The copyright\'s data',
    logoSize: 'The size of the footer\'s logo',
    logoPosition: 'The logo position in the footer',
    selectedLogo: 'The selected logo',
    newsletterLogoPosition: 'The logo position in the footer for the newsletter & social layout',
    footerBackground: 'The background color for the main footer',
    footerText: 'The text color in the main footer',
    bottomBarBackground: 'The background color for the footer\'s bottom bar',
    bottomBarText: 'The text color for the footer\'s bottom bar',
    displayNavSeparator: 'Show/Hide the navigation\'s separator',
    navSeparatorColor: 'The separator\'s color between the navigation links',
    socials: 'The social medias\'s data',
    displaySocialMedia: 'Show/Hide the social medias in the footer',
    displayDefaultSocialIcons: 'Enabled/Disabled the default social medias icons',
    socialIconPosition: 'The social medias position in the footer',
    socialIconColor: 'The color of the social medias icons',
    newsletterTitle: 'The title of the newsletter\'s section',
    newsletterText: 'The text under the title in the newsletter\'s section',
    newsletterButtonLabel: 'The text inside the newsletter\'s button',
    newsletterButtonLink: 'The link url for the newsletter\'s button',
    newsletterButtonStyle: 'The button color theme for the newsletter section (primary, secondary)',
    newsletterSocialPosition: 'The position of the newsletter and social medias',
    features: 'The feature\'s data',
    featureBarBackground: 'The background color for the footer\'s features',
    featureBarText: 'The text color for the footer\'s features'
};

<Meta
    title="Global Components/Footer"
    component={Footer}
    parameters={{
        layout: 'fullscreen'
    }}
/>

# Footer
<br />

## `Footers` are used as the main footer for a document or page.
<br />

### Default
<Canvas>
    <Story name="Default">
        <Footer data={footerDataMock} settings={getKnobs(Footer.schema().form)} menus={footerMenusMock} />
    </Story>
</Canvas>


## Usage Example
<CollapsibleJsonSnippet
    summary="settingsData"
    code={getKnobs(Footer.schema().form)}
/>
<br />
<CollapsibleJsonSnippet
    summary="footerData"
    code={footerDataMock}
/>

```jsx
import Footer from '@appdirect/sfb-theme-components/src/components/footer/Footer';

<Footer data={footerData} settings={settingsData} />
```

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

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

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