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

import { TwigContainerComponent }               from '../../../../utils/twig-container/twig-container.component';
import { PriceComponent }                       from '../angular/price.component';


<Meta
    title='Components/Price'
    component={PriceComponent}
    decorators={[
        moduleMetadata({ declarations: [PriceComponent, TwigContainerComponent]}),
    ]}
    argTypes={{
        language: {
            control: { type: 'select' },
            table: { defaultValue: { summary: 'en' } },
        },
        size: {
            control: { type: 'select' },
            table: { defaultValue: { summary: 'small' } },
        },
        hasAsterisk: {
            table: { defaultValue: { summary: false } },
        },
        fullWidth: {
            table: { defaultValue: { summary: false } },
        },
        reversed: {
            table: { defaultValue: { summary: false } },
        },
    }}
/>


# Price

<br/>



## Component API

<Props of={PriceComponent} />



## Drupal implementation example

```jsx
{% include '@bf-components/price/twig/index.twig' with {
    upperTitle      : 'From',
    upfront         : {
        dollar          : 0
        label           : 'upfront',
    },
    dollar          : 30,
    dollarClass     : 'my-dollar-class',
    cent            : 99,
    hasAsterisk     : true,
    details         : '/month',
    promotion       : {
        priceStriked  : 40.99,
        priceSaved    : 10,
        savedLabel    : 'You saved:',
        superscript   : 1,
        direction     : 'horizontal',
    },
    message         : 'This is a message',
    class           : '',
    size            : 'medium',
    language        : 'en',
} only %}
```



## Drupal

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

export const commonProps = {
    upperTitle      : 'Upper Title',
    upfront         : {
        dollar          : 0,
        label           : 'upfront'
    },
    dollar          : 30,
    dollarClass     : '',
    cent            : 99,
    hasAsterisk     : false,
    details         : '/month',
    promotion       : {
        priceStriked  : 40.99,
        priceSaved    : 10,
        savedLabel    : 'You saved:',
        superscript   : 1,
        direction     : 'horizontal',
    },
    message         : 'This is a message.',
    class           : 'p-3',
}


<Canvas withSource='none'>
    <Story
        name='Drupal'
        height='200px'
        args={{
            elementPath     : 'components/price/_doc/template.drupal',
            ...commonProps
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>


<Canvas withSource='none'>
    <Story
        name='Drupal - All Prices'
        height='800px'
        args={{
            elementPath     : 'components/price/_doc/all-prices.drupal',
            ...commonProps
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>

<Canvas withSource='none'>
    <Story
        name='Drupal - All Prices - Null validator'
        height='800px'
        args={{
            elementPath     : 'components/price/_doc/null.drupal',
        }}
    >
        {Drupal.bind({})}
    </Story>
</Canvas>