import { fontSizeRootValue } from './typographyTokens';

export const sizeBaselineValue = 8;

function calcSize(size: number): number {
  return (sizeBaselineValue * size) / fontSizeRootValue;
}

/* Global Size Tokens */
export const sizeBaseline = sizeBaselineValue + 'px';
export const size0_125x = calcSize(0.125) + 'rem';
export const size0_25x = calcSize(0.25) + 'rem';
export const size0_5x = calcSize(0.5) + 'rem';
export const size1x = calcSize(1) + 'rem';
export const size1_5x = calcSize(1.5) + 'rem';
export const size2x = calcSize(2) + 'rem';
export const size2_5x = calcSize(2.5) + 'rem';
export const size3x = calcSize(3) + 'rem';
export const size4x = calcSize(4) + 'rem';
export const size4_5x = calcSize(4.5) + 'rem';
export const size5x = calcSize(5) + 'rem';
export const size6x = calcSize(6) + 'rem';
export const size7x = calcSize(7) + 'rem';
export const size7_5x = calcSize(7.5) + 'rem';
export const size8x = calcSize(8) + 'rem';
export const size9x = calcSize(9) + 'rem';
export const size10x = calcSize(10) + 'rem';
export const size11x = calcSize(11) + 'rem';
export const size12x = calcSize(12) + 'rem';
export const size14x = calcSize(14) + 'rem';
export const size32x = calcSize(32) + 'rem';
export const size35x = calcSize(35) + 'rem';
export const size40x = calcSize(40) + 'rem';
export const size70x = calcSize(70) + 'rem';

/* Alias Size Tokens */
export const sizeBorderWidthThin = size0_125x;
export const sizeBorderWidthThick = size0_25x;
export const sizeBorderWidthThicker = size0_5x;
export const sizeBorderRadius = size0_5x;
export const sizeBorderRadiusCircle = 'calc(100% * 0.5)';
export const sizeButtonHeight = size4_5x;
export const sizeIconXl = size12x;
export const sizeIconLg = size6x;
export const sizeIconMd = size4x;
export const sizeIcon = size3x;
export const sizeIconSm = size2_5x;
export const sizeButtonIcon = size2_5x;
export const sizeSideNav = size32x;
export const sizeMenuWidthMin = size14x;
export const sizeMenuWidthMax = size35x;
export const sizeDialogWidthMin = size35x;
export const sizeDialogWidthMax = size70x;

export interface sizeTokens {
  sizeBaselineValue: number;
  sizeBaseline: string;
  size0_125x: string;
  size0_25x: string;
  size0_5x: string;
  size1x: string;
  size1_5x: string;
  size2x: string;
  size2_5x: string;
  size3x: string;
  size4x: string;
  size4_5x: string;
  size5x: string;
  size6x: string;
  size7x: string;
  size7_5x: string;
  size8x: string;
  size9x: string;
  size10x: string;
  size11x: string;
  size12x: string;
  size14x: string;
  size32x: string;
  size35x: string;
  size40x: string;
  size70x: string;

  sizeBorderWidthThin: string;
  sizeBorderWidthThick: string;
  sizeBorderWidthThicker: string;
  sizeBorderRadius: string;
  sizeBorderRadiusCircle: string;
  sizeButtonHeight: string;
  sizeIconXl: string;
  sizeIconLg: string;
  sizeIconMd: string;
  sizeIcon: string;
  sizeIconSm: string;
  sizeButtonIcon: string;
  sizeSideNav: string;
  sizeMenuWidthMin: string;
  sizeMenuWidthMax: string;
  sizeDialogWidthMin: string;
  sizeDialogWidthMax: string;
}