import { moduleMetadata } from '@storybook/angular';
import { Canvas, Meta, Story, Props } from '@storybook/addon-docs';
import { withDesign } from 'storybook-addon-designs'

import { linkFields, links } from './data';
import { TwigContainerComponent }   from '../../../../utils/twig-container/twig-container.component';
import { FooterComponent }          from '../angular/footer.component';


<Meta
    title='Components/Navigation Footer'
    component={FooterComponent}
    decorators={[
        moduleMetadata({ declarations: [FooterComponent, TwigContainerComponent]}),
        withDesign
    ]}
    parameters={{
        design: {
            type: 'figma',
            url: 'https://www.figma.com/file/7bTmk29aCBl7rCFszffYPr/DS-Library-UI-Kit-Pattern-lab?node-id=11017%3A708',
            disable: false
        },
    }}
    argTypes={{
        theme: {
            defaultValue: 'videotron',
            control: {
                type: 'select',
                options: ['videotron', 'business'],
            }
        },
        langcode: {
            defaultValue: 'EN',
            control: {
                type: 'select',
                options: ['EN', 'FR'],
            }
        },
        reversed: {
            defaultValue: false,
        }
    }}
/>


# Navigation Footer

<br/>



## Component API

<Props of={FooterComponent} />



## Drupal implementation example

```jsx
{% include '@bf-components/navigation-footer/twig/index.twig' with {
    links       : [
        {
            sectionTitle    : 'Discover',
            links           : [
                { href : '', label : 'HELIX Experience' },
                { href : '', label : 'Internet' },
                { href : '', label : 'TV' },
                { href : '', label : 'TOC / Voice'},
                { href : '', label : 'Domotic'},
            ]
        },
        {
            sectionTitle    : 'Shop',
            links           : [
                { href : '', label : 'Bundle Deals' },
                { href : '', label : 'Internet Offers' },
                { href : '', label : 'Equipments' },
            ]
        },
        {
            sectionTitle    :'My Helix',
            links           : [
                { href : '', label : 'Overview' },
                { href : '', label : 'Billing Payment' },
                { href : '', label : 'Services' },
                { href : '', label : 'Profile Settings' },
                { href : '', label : 'Pay my Bill' },
                { href : '', label : 'Manage my Account' },
            ]
        }
    ],
    linkFields          : [
        { href : '', label : 'Abous Us' },
        { href : '', label : 'Careers' },
        { href : '', label : 'Terms of Use' },
        { href : '', label : 'Private' },
        { href : '', label : 'Accessibility' }
    ],
    logo                : {
        name                : 'business',
        href                : '#',
    },
    isReduced           : false,
} only %}
```



## Drupal

export const Drupal = (args) => ({
    component: TwigContainerComponent,
    props: args,
});

<Canvas withSource='none'>
    <Story
        name='Drupal'
        args={{
            elementPath         : 'components/navigation-footer/_doc/template.drupal',
            logo                : {
                name                : 'business',
                href                : '/',
            },
            hasBackToTopLink    : true,
            linkFields,
            links,
        }}
        height='500px'
    >
        {Drupal.bind({})}
    </Story>
</Canvas>


<Canvas withSource='none'>
    <Story
        name='Drupal - Reduced'
        args={{
            elementPath         : 'components/navigation-footer/_doc/template.drupal',
            logo                : {
                name                : 'business',
                href                : '/',
            },
            hasBackToTopLink    : true,
            isReduced           : true,
            linkFields,
            links,
        }}
        height='500px'
    >
        {Drupal.bind({})}
    </Story>
</Canvas>