import type { Meta } from '@storybook/angular';
import { TypographyComponent } from '../lib/atoms/typography/typography.component';
import { TypographyVariants } from '../lib/types/TypographyVariants';

export default {
    title: 'Atoms/Typography',
    tags: ['autodocs'],
    component: TypographyComponent,
    args: {
        color: "#000000",
        ellipsis: false,
        letterSpacing: "normal",
        lineHeight: null,
        maxWidth: null,
        size: '1.4rem',
        variant: 0,
    },
    argTypes: {
        color: {
            description: "Color for text as a string",
            control: {'presetColors': ["#000000"]}
        },
        ellipsis: {
            type: 'boolean',
            description: "If true, turns overflowing text into ellipsis (...) when the maxWidth attr is set",
            table: {'defaultValue':{'detail': 'Defaults to false', 'summary': 'false'}}
        },
        letterSpacing: {
            description: "Sets the horizontal spacing behavior between text characters",
            table: {defaultValue: {summary: "normal", detail: "Defaults to normal"}}
        },
        lineHeight: {
            description: "Sets the height of a line box in horizontal writing modes. Can be set to null, if null it will be the same as the font-size.",
            control: {
                type: "text"
            },
            table: {defaultValue: {summary: "1.4rem", detail: "Defaults to font-size"}}
        },
        maxWidth: {
            description: "Maximum width that the text might take (null if no max width)",
            control: {
                type: 'text',
            },
            table: {defaultValue: {summary: "null", detail: "Max width not set"}}
        },
        size: {
            description: "Font size with it's units",
            table: {defaultValue: {summary: "1.4rem", detail: "This is the default font size"}},
        },
        variant: {
            control: 'select',
            description: 'HTMLElement p, h1, h2, h3, h4, h5',
            mapping: {
                [TypographyVariants[0]]: TypographyVariants.p, 
                [TypographyVariants[1]]: TypographyVariants.h1, 
                [TypographyVariants[2]]: TypographyVariants.h2,
                [TypographyVariants[3]]: TypographyVariants.h3,
                [TypographyVariants[4]]: TypographyVariants.h4,
                [TypographyVariants[5]]: TypographyVariants.h5
            },
            options: [
                TypographyVariants[0],
                TypographyVariants[1], 
                TypographyVariants[2],
                TypographyVariants[3],
                TypographyVariants[4],
                TypographyVariants[5]
            ],
            table: {defaultValue: {summary: "0", detail: "Enum value for paragraph"}},
        },
    },
} as Meta<TypographyComponent>;


const Template = (args: {variant: TypographyVariants, ellipsis: boolean, letterSpacing: string, lineHeight: null|string, size: string, color: string, maxWidth: null|string}) => ({
  props: args,
  template: `
  <mw-typography 
    [variant]="${args.variant}"
    [ellipsis]="${args.ellipsis}" 
    color="${args.color}"
    letterSpacing="${args.letterSpacing}"
    lineHeight="${args.lineHeight}"
    maxWidth="${args.maxWidth}"
    size="${args.size}"
    >Texto</mw-typography>`,
});

export const Paragraph = Template.bind({});
