import { Meta, StoryObj } from '@storybook/react';

import { TokenTypography } from '.';

export default {
  args: {},
  component: TokenTypography,
  title: 'Components/TokenTypography',
} as Meta<typeof TokenTypography>;

export const Default: StoryObj<typeof TokenTypography> = {
  args: {
    colorToken: 'white100',
    token: '%',
    tokenColorToken: 'white950',
    typographyToken: 'bodyMediumMedium',
    value: 100,
  },
};

export const WithPrefixToken: StoryObj<typeof TokenTypography> = {
  args: {
    colorToken: 'white100',
    prefixColorToken: 'white950',
    prefixToken: '$',
    token: 'K',
    tokenColorToken: 'white950',
    typographyToken: 'bodyMediumMedium',
    value: 100,
  },
};

export const WithRangeValues: StoryObj<typeof TokenTypography> = {
  args: {
    colorToken: 'white100',
    token: '%',
    tokenColorToken: 'white950',
    typographyToken: 'bodyMediumMedium',
    value: 52,
    value2: 97,
  },
};

export const WithRangeValuesDifferentColors: StoryObj<typeof TokenTypography> = {
  args: {
    colorToken: 'primary500',
    colorToken2: 'error500',
    slashColorToken: 'white100',
    token: '%',
    tokenColorToken: 'primary700',
    tokenColorToken2: 'error700',
    typographyToken: 'bodyMediumMedium',
    value: 52,
    value2: 97,
  },
};

export const WithRangeValuesPrefixToken: StoryObj<typeof TokenTypography> = {
  args: {
    colorToken: 'white100',
    prefixColorToken: 'white950',
    prefixToken: '$',
    token: 'M',
    tokenColorToken: 'white950',
    typographyToken: 'bodyMediumMedium',
    value: 52,
    value2: 97,
  },
};

export const WithNegativeDifference: StoryObj<typeof TokenTypography> = {
  args: {
    colorToken: 'white100',
    differenceColorToken: 'error500',
    differenceValue: -2,
    token: '%',
    tokenColorToken: 'white950',
    typographyToken: 'bodyMediumMedium',
    value: 100,
  },
};

export const WithPositiveDifference: StoryObj<typeof TokenTypography> = {
  args: {
    colorToken: 'white100',
    differenceColorToken: 'primary500',
    differenceValue: 2,
    token: '%',
    tokenColorToken: 'white950',
    typographyToken: 'bodyMediumMedium',
    value: 100,
  },
};

export const WithAttentionIndicator: StoryObj<typeof TokenTypography> = {
  args: {
    attentionIndicatorColorToken: 'error500',
    colorToken: 'white100',
    differenceColorToken: 'primary500',
    differenceValue: 2,
    token: '%',
    tokenColorToken: 'white950',
    typographyToken: 'bodyMediumMedium',
    value: 100,
  },
};

export const WithTwoTokens: StoryObj<typeof TokenTypography> = {
  args: {
    colorToken: 'white100',
    prefixColorToken: 'white950',
    prefixToken: '$',
    token: 'M',
    token2: 'K',
    tokenColorToken: 'white950',
    typographyToken: 'bodyMediumMedium',
    value: 52,
    value2: 97,
  },
};