import { size0_125x, sizeBorderWidthThicker } from './sizeTokens';
import {
  outlineKeyboardNavigationFocus,
  textPrimary,
  textSecondary,
  textLinkEnabled,
  textLinkHover,
  textLinkVisited,
  textLinkFocus,
  textLinkActive,
  textLinkDisabled,
} from './colorTokens';
import {
  fontStack,
  fontStackPair,
  fontStackMono,
  fontWeightLight,
  fontWeightMedium,
  fontWeightRegular,
  fontSize0_75x,
  fontSize0_875x,
  fontSize1x,
  fontSize1_25x,
  fontSize1_5x,
  fontSize2_25x,
  fontSize3x,
  fontLineHeight1x,
  fontLineHeight1_25x,
  fontLineHeight1_5x,
  fontLineHeight1_75x,
  fontLineHeight2x,
  fontLineHeight3x,
  fontLineHeight3_75x,
  fontLetterSpacing0_005x,
  fontLetterSpacing0_01x,
  fontLetterSpacing0_015x,
  fontLetterSpacing0_03x,
} from './typographyTokens';

type GlobalTokensType = {
  keyboardNavigationFocus: {};
  text: {};
  textSM: {};
  textXS: {};
  textMono: {};
  textButton: {};
  headingXL: {};
  headingLG: {};
  headingMD: {};
  heading: {};
  title: {};
  titleSM: {};
};

export const keyboardNavigationFocus = `
  outline-width: ${sizeBorderWidthThicker}; 
  outline-style: solid; 
  outline-color: ${outlineKeyboardNavigationFocus}; 
  outline-offset: ${size0_125x};
`;
const keyboardNavigationFocusObject = {
  outlineWidth: sizeBorderWidthThicker,
  outlineStyle: 'solid',
  outlineColor: outlineKeyboardNavigationFocus,
  outlineOffset: size0_125x,
};

export const text = `
  color:${textPrimary};
  font-family: ${fontStack};
  font-weight: ${fontWeightRegular};
  letter-spacing: ${fontLetterSpacing0_01x};
  font-size: ${fontSize1x};
  line-height: ${fontLineHeight1_5x};
  margin: 0;
`;
const textObject = {
  color: textPrimary,
  fontFamily: fontStack,
  fontWeight: fontWeightRegular,
  letterSpacing: fontLetterSpacing0_01x,
  fontSize: fontSize1x,
  lineHeight: fontLineHeight1_5x,
  margin: 0,
};

export const textSM = `
  color:${textPrimary};
  font-family: ${fontStack};
  font-weight: ${fontWeightRegular};
  letter-spacing: ${fontLetterSpacing0_01x};
  font-size: ${fontSize0_875x};
  line-height: ${fontLineHeight1_25x};
  margin: 0;
`;
const textSMObject = {
  color: textPrimary,
  fontFamily: fontStack,
  fontWeight: fontWeightRegular,
  letterSpacing: fontLetterSpacing0_01x,
  fontSize: fontSize0_875x,
  lineHeight: fontLineHeight1_25x,
  margin: 0,
};

export const textXS = `
  color:${textPrimary};
  font-family: ${fontStack};
  font-weight: ${fontWeightRegular};
  letter-spacing: ${fontLetterSpacing0_015x};
  font-size: ${fontSize0_75x};
  line-height: ${fontLineHeight1x};
  margin: 0;
`;
const textXSObject = {
  color: textPrimary,
  fontFamily: fontStack,
  fontWeight: fontWeightRegular,
  letterSpacing: fontLetterSpacing0_015x,
  fontSize: fontSize0_75x,
  lineHeight: fontLineHeight1x,
  margin: 0,
};

export const textMono = `
  color:${textPrimary};
  font-family: ${fontStackMono};
  font-weight: ${fontWeightRegular};
  letter-spacing: ${fontLetterSpacing0_01x};
  line-height: ${fontLineHeight1_25x};
  font-size: inherit;
  margin: 0;
`;
const textMonoObject = {
  color: textPrimary,
  fontFamily: fontStackMono,
  fontWeight: fontWeightRegular,
  letterSpacing: fontLetterSpacing0_01x,
  lineHeight: fontLineHeight1_25x,
  fontSize: 'inherit',
  margin: 0,
};

export const textLink = `
  font-family: ${fontStack};
  font-weight: ${fontWeightRegular};
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-decoration-style: solid;
  color: ${textLinkEnabled};
  :hover {
    cursor: pointer;
    color: ${textLinkHover};
  }
  :visited {
    color: ${textLinkVisited};
  }
  &[data-focus-visible-added] {
    color: ${textLinkFocus};
  }
  :active {
    color: ${textLinkActive};
  }
  :disabled {
    color: ${textLinkDisabled};
  }
`;

export const textButton = `
  color:${textPrimary};
  font-family: ${fontStackPair};
  font-weight: ${fontWeightMedium};
  font-size: ${fontSize0_875x};
  line-height: ${fontLineHeight1_25x};
  letter-spacing: ${fontLetterSpacing0_03x};
  margin: 0;
`;
const textButtonObject = {
  color: textPrimary,
  fontFamily: fontStackPair,
  fontWeight: fontWeightMedium,
  fontSize: fontSize0_875x,
  lineHeight: fontLineHeight1_25x,
  letterSpacing: fontLetterSpacing0_03x,
  margin: 0,
};

export const headingXL = `
  font-weight: ${fontWeightLight};
  font-size: ${fontSize3x};
  line-height: ${fontLineHeight3_75x};
  font-family: ${fontStack};
  color: ${textPrimary};
  margin: 0;
  letter-spacing: 0;
`;
const headingXLObject = {
  fontWeight: fontWeightLight,
  fontSize: fontSize3x,
  lineHeight: fontLineHeight3_75x,
  fontFamily: fontStack,
  color: textPrimary,
  margin: 0,
  letterSpacing: 0,
};

export const headingLG = `
  font-weight: ${fontWeightLight};
  font-size: ${fontSize2_25x};
  line-height: ${fontLineHeight3x};
  font-family: ${fontStack};
  color: ${textPrimary};
  margin: 0;
  letter-spacing: 0;
`;
const headingLGObject = {
  fontWeight: fontWeightLight,
  fontSize: fontSize2_25x,
  lineHeight: fontLineHeight3x,
  fontFamily: fontStack,
  color: textPrimary,
  margin: 0,
  letterSpacing: 0,
};

export const headingMD = `
  font-weight: ${fontWeightMedium};
  font-size: ${fontSize1_5x};
  line-height: ${fontLineHeight2x};
  font-family: ${fontStack};
  color: ${textPrimary};
  letter-spacing: 0;
  margin: 0;
`;
const headingMDObject = {
  fontWeight: fontWeightMedium,
  fontSize: fontSize1_5x,
  lineHeight: fontLineHeight2x,
  fontFamily: fontStack,
  color: textPrimary,
  letterSpacing: 0,
  margin: 0,
};

export const heading = `
  font-weight: ${fontWeightMedium};
  font-size: ${fontSize1_25x};
  line-height: ${fontLineHeight1_75x};
  letter-spacing: ${fontLetterSpacing0_01x};
  font-family: ${fontStack};
  color: ${textPrimary};
  margin: 0;
`;
const headingObject = {
  fontWeight: fontWeightMedium,
  fontSize: fontSize1_25x,
  lineHeight: fontLineHeight1_75x,
  letterSpacing: fontLetterSpacing0_01x,
  fontFamily: fontStack,
  color: textPrimary,
  margin: 0,
};

export const title = `
  font-weight: ${fontWeightRegular};
  font-size: ${fontSize1_25x};
  line-height: ${fontLineHeight1_75x};
  letter-spacing: ${fontLetterSpacing0_005x};
  font-family: ${fontStack};
  color: ${textPrimary};
  margin: 0;
`;
const titleObject = {
  fontWeight: fontWeightRegular,
  fontSize: fontSize1_25x,
  lineHeight: fontLineHeight1_75x,
  letterSpacing: fontLetterSpacing0_005x,
  fontFamily: fontStack,
  color: textPrimary,
  margin: 0,
};

export const titleSM = `
  font-family: ${fontStackPair};
  color: ${textSecondary};
  font-weight: ${fontWeightMedium};
  font-size: ${fontSize0_75x};
  line-height: ${fontLineHeight1x};
  letter-spacing: ${fontLetterSpacing0_005x};
  color: ${textPrimary};
  margin: 0;
`;
const titleSMObject = {
  fontFamily: fontStackPair,
  fontWeight: fontWeightMedium,
  fontSize: fontSize0_75x,
  lineHeight: fontLineHeight1x,
  letterSpacing: fontLetterSpacing0_005x,
  color: textPrimary,
  margin: 0,
};

export const globalTokens: GlobalTokensType = {
  keyboardNavigationFocus: keyboardNavigationFocusObject,
  text: textObject,
  textSM: textSMObject,
  textXS: textXSObject,
  textMono: textMonoObject,
  textButton: textButtonObject,
  headingXL: headingXLObject,
  headingLG: headingLGObject,
  headingMD: headingMDObject,
  heading: headingObject,
  title: titleObject,
  titleSM: titleSMObject,
};

export interface globalTokens {
  keyboardNavigationFocus: string;

  text: string;
  textSM: string;
  textXS: string;
  textMono: string;
  textLink: string;
  textButton: string;

  headingXL: string;
  headingLG: string;
  headingMD: string;
  heading: string;
  title: string;
  titleSM: string;
  globalTokens: GlobalTokensType;
}