import type { TypographyStyle } from '@mui/material/styles';

const fontWeights = {
  '--font-weight-bold': 700,
  '--font-weight-semibold': 600,
  '--font-weight-medium': 500,
  '--font-weight-regular': 400,
} as const;

const headline = {
  '--headline1-font-weight': 'var(--font-weight-semibold)',
  '--headline1-font-size': '52px',
  '--headline1-line-height': '68px',
  '--headline2-font-weight': 'var(--font-weight-bold)',
  '--headline2-font-size': '38px',
  '--headline2-line-height': '65px',
  '--headline3-font-weight': 'var(--font-weight-semibold)',
  '--headline3-font-size': '24px',
  '--headline3-line-height': '29px',
  '--headline4-font-weight': 'var(--font-weight-semibold)',
  '--headline4-font-size': '20px',
  '--headline4-line-height': '28px',
  '--headline5-font-weight': 'var(--font-weight-semibold)',
  '--headline5-font-size': '16px',
  '--headline5-line-height': '24px',
} as const;

const body = {
  '--body1-16-semibold-font-weight': 'var(--font-weight-semibold)',
  '--body1-16-semibold-font-size': '16px',
  '--body1-16-semibold-line-height': '24px',
  '--body1-16-regular-font-weight': 'var(--font-weight-regular)',
  '--body1-16-regular-font-size': '16px',
  '--body1-16-regular-line-height': '24px',
  '--body2-14-bold-font-weight': 'var(--font-weight-bold)',
  '--body2-14-bold-font-size': '14px',
  '--body2-14-bold-line-height': '20px',
  '--body2-14-medium-font-weight': 'var(--font-weight-medium)',
  '--body2-14-medium-font-size': '14px',
  '--body2-14-medium-line-height': '20px',
  '--body2-14-regular-font-weight': 'var(--font-weight-regular)',
  '--body2-14-regular-font-size': '14px',
  '--body2-14-regular-line-height': '20px',
  '--body3-12-semibold-font-weight': 'var(--font-weight-semibold)',
  '--body3-12-semibold-font-size': '12.4px',
  '--body3-12-semibold-line-height': '16px',
  '--body3-12-regular-font-weight': 'var(--font-weight-regular)',
  '--body3-12-regular-font-size': '12.4px',
  '--body3-12-regular-line-height': '16px',
  '--body_m2-font-weight': 'var(--font-weight-medium)',
  '--body_m2-font-size': '13px',
  '--body_m2-line-height': '18px',
  '--body_reg6-font-weight': 'var(--font-weight-regular)',
  '--body_reg6-font-size': '13px',
  '--body_reg6-line-height': '18px',
  '--body_reg8-font-weight': 'var(--font-weight-regular)',
  '--body_reg8-font-size': '12px',
  '--body_reg8-line-height': '16px',
} as const;

const smallBody = {
  '--small_body_sb1-font-weight': 'var(--font-weight-semibold)',
  '--small_body_sb1-font-size': '12px',
  '--small_body_sb1-line-height': '16px',
  '--small_body_m2-font-weight': 'var(--font-weight-medium)',
  '--small_body_m2-font-size': '12px',
  '--small_body_m2-line-height': '20px',
} as const;

const etc = {
  '--overline-font-weight': 'var(--font-weight-medium)',
  '--overline-font-size': '14px',
  '--overline-line-height': '20px',
  '--button1-font-weight': 'var(--font-weight-medium)',
  '--button1-font-size': '16px',
  '--button1-line-height': '22px',
  '--button2-font-weight': 'var(--font-weight-medium)',
  '--button2-font-size': '14px',
  '--button2-line-height': '20px',
  '--caption-font-weight': 'var(--font-weight-medium)',
  '--caption-font-size': '12px',
  '--caption-line-height': '16px',
} as const;

const fontVariants: Record<string, TypographyStyle> = {
  headline1: {
    fontWeight: 'var(--headline1-font-weight)',
    fontSize: 'var(--headline1-font-size)',
    lineHeight: 'var(--headline1-line-height)',
  },
  headline2: {
    fontWeight: 'var(--headline2-font-weight)',
    fontSize: 'var(--headline2-font-size)',
    lineHeight: 'var(--headline2-line-height)',
  },
  headline3: {
    fontWeight: 'var(--headline3-font-weight)',
    fontSize: 'var(--headline3-font-size)',
    lineHeight: 'var(--headline3-line-height)',
  },
  headline4: {
    fontWeight: 'var(--headline4-font-weight)',
    fontSize: 'var(--headline4-font-size)',
    lineHeight: 'var(--headline4-line-height)',
  },
  headline5: {
    fontWeight: 'var(--headline5-font-weight)',
    fontSize: 'var(--headline5-font-size)',
    lineHeight: 'var(--headline5-line-height)',
  },
  body1_16_semibold: {
    fontWeight: 'var(--body1-16-semibold-font-weight)',
    fontSize: 'var(--body1-16-semibold-font-size)',
    lineHeight: 'var(--body1-16-semibold-line-height)',
  },
  body1_16_regular: {
    fontWeight: 'var(--body1-16-regular-font-weight)',
    fontSize: 'var(--body1-16-regular-font-size)',
    lineHeight: 'var(--body1-16-regular-line-height)',
  },
  body2_14_bold: {
    fontWeight: 'var(--body2-14-bold-font-weight)',
    fontSize: 'var(--body2-14-bold-font-size)',
    lineHeight: 'var(--body2-14-bold-line-height)',
  },
  body2_14_medium: {
    fontWeight: 'var(--body2-14-medium-font-weight)',
    fontSize: 'var(--body2-14-medium-font-size)',
    lineHeight: 'var(--body2-14-medium-line-height)',
  },
  body2_14_regular: {
    fontWeight: 'var(--body2-14-regular-font-weight)',
    fontSize: 'var(--body2-14-regular-font-size)',
    lineHeight: 'var(--body2-14-regular-line-height)',
  },
  body3_12_semibold: {
    fontWeight: 'var(--body3-12-semibold-font-weight)',
    fontSize: 'var(--body3-12-semibold-font-size)',
    lineHeight: 'var(--body3-12-semibold-line-height)',
  },
  body3_12_regular: {
    fontWeight: 'var(--body3-12-regular-font-weight)',
    fontSize: 'var(--body3-12-regular-font-size)',
    lineHeight: 'var(--body3-12-regular-line-height)',
  },
  body_m2: {
    fontWeight: 'var(--body_m2-font-weight)',
    fontSize: 'var(--body_m2-font-size)',
    lineHeight: 'var(--body_m2-line-height)',
    letterSpacing: '0.2px',
  },
  body_reg6: {
    fontWeight: 'var(--body_reg6-font-weight)',
    fontSize: 'var(--body_reg6-font-size)',
    lineHeight: 'var(--body_reg6-line-height)',
  },
  body_reg8: {
    fontWeight: 'var(--body_reg8-font-weight)',
    fontSize: 'var(--body_reg8-font-size)',
    lineHeight: 'var(--body_reg8-line-height)',
  },
  small_body_sb1: {
    fontWeight: 'var(--small_body_sb1-font-weight)',
    fontSize: 'var(--small_body_sb1-font-size)',
    lineHeight: 'var(--small_body_sb1-line-height)',
  },
  small_body_m2: {
    fontWeight: 'var(--small_body_m2-font-weight)',
    fontSize: 'var(--small_body_m2-font-size)',
    lineHeight: 'var(--small_body_m2-line-height)',
  },
  overline: {
    fontWeight: 'var(--overline-font-weight)',
    fontSize: 'var(--overline-font-size)',
    lineHeight: 'var(--overline-line-height)',
    letterSpacing: '1px',
    textTransform: 'uppercase',
  },
  button1: {
    fontWeight: 'var(--button1-font-weight)',
    fontSize: 'var(--button1-font-size)',
    lineHeight: 'var(--button1-line-height)',
    textTransform: 'capitalize',
  },
  button2: {
    fontWeight: 'var(--button2-font-weight)',
    fontSize: 'var(--button2-font-size)',
    lineHeight: 'var(--button2-line-height)',
    letterSpacing: '0.2px',
    textTransform: 'capitalize',
  },
  caption: {
    fontWeight: 'var(--caption-font-weight)',
    fontSize: 'var(--caption-font-size)',
    lineHeight: 'var(--caption-line-height)',
  },
};

export const cssVariables = {
  ...fontWeights,
  ...headline,
  ...body,
  ...smallBody,
  ...etc,
};

export { fontVariants };