import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { TooltipModule } from 'primeng/tooltip';
import { TextComponent } from './text.component';

export default {
    title: 'Components/Text',
    component: TextComponent,
    decorators: [
        moduleMetadata({
            imports: [TooltipModule],
        }),
    ],
    argTypes: {
        size: {
            options: ['10', '12', '14', '16', '18', '20', '22', '26', '30', '36', '42'],
            control: {
                type: 'select',
            },
        },
        mobileSize: {
            options: ['10', '12', '14', '16', '18', '20', '22', '26', '30', '36', '42'],
            control: {
                type: 'select',
            },
        },
        weight: {
            options: ['light', 'regular', 'medium', 'bold'],
            control: {
                type: 'select',
            },
        },
        mobileWeight: {
            options: ['light', 'regular', 'medium', 'bold'],
            control: {
                type: 'select',
            },
        },
        color: {
            options: ['default', 'dark-blue', 'blue', 'light-gray', 'light-blue', 'red', 'orange', 'white'],
            control: {
                type: 'select',
            },
        },
        align: {
            options: ['left', 'right', 'mobile-left', 'mobile-right', 'center', 'justify'],
            control: {
                type: 'select',
            },
        },
        ellipsis: {
            control: 'boolean',
        },
        tooltip: {
            control: 'text',
        },
        tooltipPosition: {
            options: ['top', 'bottom'],
            control: {
                type: 'select',
            },
        },
    },
} as Meta;

const Template: Story<TextComponent> = (args) => {
    return {
        template: `
          <div [ngStyle]="{width}">
              <text 
                [size]="size" 
                [mobileSize]="mobileSize" 
                [weight]="weight" 
                [mobileWeight]="mobileWeight" 
                [color]="color" 
                [align]="align" 
                [ellipsis]="ellipsis"
                [tooltip]="tooltip"
                [tooltipPosition]="tooltipPosition"
              >
                {{ content }}
              </text>
          </div>`,
        props: args,
    };
};

export const Default = Template.bind({});
Default.args = {
    content: 'Международный аэропорт Хабаровск (Новый) им. Г. И. Невельского',
    width: '150px',
};
