import { pxToRem } from '@lendi-ui/commons/utils';
import { LineHeight, fontSize } from '../../tokens';
import { FontSizeType } from './Text';

export const getFontSize = (variant: string): FontSizeType => {
  const styles = styleData[variant as keyof typeof styleData];

  return styles.fontSize;
};

export const getLineHeight = (variant: string): number => {
  const styles = styleData[variant as keyof typeof styleData];

  return styles.lineHeight;
};

export const getTextColor = (theme: Object, appearance?: 'error' | 'subtle') => {
  if (appearance) {
    if (appearance === 'error') {
      return theme.color.interaction.error;
    }

    if (appearance === 'subtle') {
      return theme.color.text.subtle;
    }
  }

  return theme.color.text.main;
};

export const linkStyle = (theme: any) => {
  return {
    textDecoration: 'underline',
    color: theme.color.interaction.main,
    fontFamily: theme.asset.font.body.family,
    '&:hover': {
      textDecoration: 'none',
    },
  };
};

export const styleData = {
  display: {
    fontSize: {
      mobile: pxToRem(36),
      desktop: pxToRem(fontSize[10]),
    },
    lineHeight: 1.31,
  },
  display1: {
    fontSize: {
      mobile: pxToRem(fontSize[9]),
      desktop: pxToRem(fontSize[10]),
    },
    lineHeight: LineHeight.heading,
  },
  display2: {
    hasMobile: true,
    fontSize: {
      mobile: pxToRem(fontSize[8]),
      desktop: pxToRem(fontSize[9]),
    },
    lineHeight: LineHeight.heading,
  },
  title1: {
    hasMobile: true,
    fontSize: {
      mobile: pxToRem(fontSize[7]),
      desktop: pxToRem(fontSize[8]),
    },
    lineHeight: LineHeight.heading,
  },
  title2: {
    hasMobile: false,
    fontSize: {
      mobile: pxToRem(fontSize[6]),
    },
    lineHeight: LineHeight.heading,
  },
  title3: {
    hasMobile: false,
    fontSize: {
      mobile: pxToRem(fontSize[5]),
    },
    lineHeight: LineHeight.heading,
  },
  title4: {
    hasMobile: false,
    fontSize: {
      mobile: pxToRem(fontSize[4]),
    },
    lineHeight: LineHeight.heading,
  },
  lead1: {
    hasMobile: true,
    fontSize: {
      mobile: pxToRem(fontSize[5]),
      desktop: pxToRem(fontSize[6]),
    },
    lineHeight: LineHeight.body,
  },
  lead2: {
    hasMobile: true,
    fontSize: {
      mobile: pxToRem(fontSize[3]),
      desktop: pxToRem(fontSize[5]),
    },
    lineHeight: LineHeight.body,
  },
  subtitle1: {
    hasMobile: false,
    fontSize: {
      mobile: pxToRem(fontSize[3]),
    },
    lineHeight: LineHeight.body,
  },
  subtitle2: {
    hasMobile: false,
    fontSize: {
      mobile: pxToRem(fontSize[2]),
    },
    lineHeight: LineHeight.body,
  },
  body1: {
    hasMobile: false,
    fontSize: {
      mobile: pxToRem(fontSize[3]),
    },
    lineHeight: LineHeight.body,
  },
  body2: {
    hasMobile: false,
    fontSize: {
      mobile: pxToRem(fontSize[2]),
    },
    lineHeight: LineHeight.body,
  },
  detail1: {
    hasMobile: false,
    fontSize: {
      mobile: pxToRem(fontSize[1]),
    },
    lineHeight: LineHeight.body,
  },
  detail2: {
    hasMobile: false,
    fontSize: {
      mobile: pxToRem(fontSize[1]),
    },
    lineHeight: LineHeight.body,
  },
  overline: {
    hasMobile: false,
    fontSize: {
      mobile: pxToRem(fontSize[2]),
    },
    lineHeight: LineHeight.heading,
  },
  button1: {
    hasMobile: false,
    fontSize: {
      mobile: pxToRem(fontSize[3]),
    },
    lineHeight: LineHeight.body,
  },
  button2: {
    hasMobile: false,
    fontSize: {
      mobile: pxToRem(fontSize[2]),
    },
    lineHeight: LineHeight.body,
  },
} as const;