import {Platform, StyleSheet, Text, useWindowDimensions} from 'react-native';
import React, {FC} from 'react';
import PlayyTextProps from './Props';
import {useTheme} from '../../theme/ThemeContext';
import {useFontConfig} from '../../font/FontContext';

const PlayyText: FC<PlayyTextProps> = ({
  children,
  color,
  lightColor,
  darkColor,
  useThemeColor = false,
  themeTextType = 'primary',
  numberOfLines,
  letterSpacing,
  marginLeft,
  ellipsizeMode,
  LargeTitle_Regular,
  LargeTitle_Emphasized,
  LargeTitle_Condensed,
  Title1_Emphasized,
  Title1_Condensed,
  Title1_Regular,
  Title1_Strong,
  Title2_Regular,
  Title2_Emphasized,
  Title2_Strong,
  Title2_Condensed,
  Title3_Regular,
  Title3_Emphasized,
  Title3_Condensed,
  HeadlineRegular,
  HeadlineItalic,
  BodyRegular,
  BodyEmphasized,
  BodyStrong,
  BodyItalic,
  BodyEmphasizedItalic,
  CalloutRegular,
  CalloutEmphasized,
  CalloutItalic,
  CalloutEmphasizedItalic,
  SubheadRegular,
  SubheadEmphasized,
  SubheadItalic,
  SubheadEmphasizedItalic,
  FootnoteRegular,
  FootnoteEmphasized,
  FootnoteStrong,
  FootnoteItalic,
  FootnoteEmphasizedItalic,
  Caption1Regular,
  Caption1Emphasized,
  Caption1Italic,
  Caption1EmphasizedItalic,
  Caption2Regular,
  Caption2Emphasized,
  Caption2Italic,
  Caption2EmphasizedItalic,
  HeadlineEmphasized,
  style,
  ...rest
}) => {
  const {fontScale} = useWindowDimensions();
  const {colors} = useTheme();
  const fonts = useFontConfig();
  const styles = makeStyles(
    fonts,
    Platform.OS === 'ios' ? fontScale : fontScale * 1.1,
  );
  return (
    <Text
      style={[
        {
          color: color ?? colors.text_primary,
          letterSpacing: letterSpacing,
          marginLeft: marginLeft,
        },
        LargeTitle_Regular && styles.largeTitleRegular,
        LargeTitle_Emphasized && styles.largeTitleEmphasized,
        LargeTitle_Condensed && styles.largeTitleCondensed,
        Title1_Emphasized && styles.title1Emphasized,
        Title1_Condensed && styles.title1Condensed,
        Title1_Regular && styles.title1Regular,
        Title1_Strong && styles.title1Strong,
        Title2_Regular && styles.title2Regular,
        Title2_Emphasized && styles.title2Emphasized,
        Title2_Strong && styles.title2Strong,
        Title2_Condensed && styles.title2Condensed,
        Title3_Regular && styles.title3Regular,
        Title3_Emphasized && styles.title3Emphasized,
        Title3_Condensed && styles.title3Condensed,
        HeadlineRegular && styles.headlineRegular,
        HeadlineItalic && styles.headlineItalic,
        BodyRegular && styles.bodyRegular,
        BodyEmphasized && styles.bodyEmphasized,
        BodyStrong && styles.bodyStrong,
        BodyItalic && styles.bodyItalic,
        BodyEmphasizedItalic && styles.bodyEmphasizedItalic,
        CalloutRegular && styles.calloutRegular,
        CalloutEmphasized && styles.calloutEmphasized,
        CalloutItalic && styles.calloutItalic,
        CalloutEmphasizedItalic && styles.calloutEmphasizedItalic,
        SubheadRegular && styles.subheadRegular,
        SubheadEmphasized && styles.subheadEmphasized,
        SubheadItalic && styles.subheadItalic,
        SubheadEmphasizedItalic && styles.subheadEmphasizedItalic,
        FootnoteRegular && styles.footnoteRegular,
        FootnoteEmphasized && styles.footnoteEmphasized,
        FootnoteStrong && styles.footnoteStrong,
        FootnoteItalic && styles.footnoteItalic,
        FootnoteEmphasizedItalic && styles.footnoteEmphasizedItalic,
        Caption1Regular && styles.caption1Regular,
        Caption1Emphasized && styles.caption1Emphasized,
        Caption1Italic && styles.caption1Italic,
        Caption1EmphasizedItalic && styles.caption1EmphasizedItalic,
        Caption2Regular && styles.caption2Regular,
        Caption2Emphasized && styles.caption2Emphasized,
        Caption2Italic && styles.caption2Italic,
        Caption2EmphasizedItalic && styles.caption2EmphasizedItalic,
        HeadlineEmphasized && styles.headlineEmphasized,
        style,
      ]}
      numberOfLines={numberOfLines}
      ellipsizeMode={ellipsizeMode}
      {...rest}>
      {children}
    </Text>
  );
};
const makeStyles = (
  fonts: ReturnType<typeof useFontConfig>,
  fontScale: number,
) =>
  StyleSheet.create({
    largeTitleRegular: {
      fontFamily: fonts.regular,
      fontSize: 34 / fontScale,
      lineHeight: 41 / fontScale,
      letterSpacing: 0.4,
    },
    largeTitleEmphasized: {
      fontFamily: fonts.medium,
      fontSize: 34 / fontScale,
      lineHeight: 41 / fontScale,
      letterSpacing: 0.4,
    },
    largeTitleCondensed: {
      fontFamily: fonts.SemiCondensedExtraBold,
      fontSize: 34 / fontScale,
      lineHeight: 41 / fontScale,
      letterSpacing: 0.4,
    },
    title1Emphasized: {
      fontSize: 28 / fontScale,
      fontFamily: fonts.medium,
      letterSpacing: -0.38,
      lineHeight: 34,
    },
    title1Condensed: {
      fontSize: 28 / fontScale,
      fontFamily: fonts.SemiCondensedExtraBold,
      letterSpacing: -0.6,
      lineHeight: 34 / fontScale,
    },
    title1Regular: {
      fontSize: 28 / fontScale,
      fontFamily: fonts.regular,
      letterSpacing: 0.37,
      lineHeight: 34 / fontScale,
    },
    title1Strong: {
      fontSize: 28 / fontScale,
      fontFamily: fonts.bold,
      letterSpacing: -0.37,
      lineHeight: 34,
    },
    title2Regular: {
      fontSize: 22 / fontScale,
      fontFamily: fonts.regular,
      letterSpacing: -0.25,
      lineHeight: 28 / fontScale,
    },
    title2Emphasized: {
      fontSize: 22 / fontScale,
      fontFamily: fonts.medium,
      letterSpacing: -0.25,
      lineHeight: 28 / fontScale,
    },
    title2Strong: {
      fontSize: 22 / fontScale,
      fontFamily: fonts.bold,
      letterSpacing: -0.25,
      lineHeight: 28 / fontScale,
    },
    title2Condensed: {
      fontSize: 22 / fontScale,
      fontFamily: fonts.SemiCondensedExtraBold,
      letterSpacing: -0.25,
      lineHeight: 28 / fontScale,
    },
    title3Regular: {
      fontSize: 20 / fontScale,
      fontFamily: fonts.regular,
      letterSpacing: -0.44,
      lineHeight: 25 / fontScale,
    },
    title3Emphasized: {
      fontSize: 20 / fontScale,
      fontFamily: fonts.medium,
      letterSpacing: -0.44,
      lineHeight: 25 / fontScale,
    },
    title3Condensed: {
      fontSize: 20 / fontScale,
      fontFamily: fonts.SemiCondensedExtraBold,
      letterSpacing: -0.44,
      lineHeight: 25 / fontScale,
    },
    headlineRegular: {
      fontSize: 17 / fontScale,
      fontFamily: fonts.medium,
      letterSpacing: -0.23,
      lineHeight: 22 / fontScale,
    },
    headlineItalic: {
      fontSize: 17 / fontScale,
      fontFamily: fonts.medium,
      letterSpacing: -0.23,
      lineHeight: 22 / fontScale,
      fontStyle: 'italic',
    },
    bodyRegular: {
      fontSize: 17 / fontScale,
      fontFamily: fonts.regular,
      letterSpacing: -0.1,
      lineHeight: 22 / fontScale,
    },
    bodyEmphasized: {
      fontSize: 17 / fontScale,
      fontFamily: fonts.medium,
      letterSpacing: -0.1,
      lineHeight: 22 / fontScale,
    },
    bodyStrong: {
      fontSize: 17 / fontScale,
      fontFamily: fonts.medium,
      lineHeight: 24 / fontScale,
    },
    bodyItalic: {
      fontSize: 17 / fontScale,
      fontFamily: fonts.regularItalic,
      letterSpacing: -0.1,
      lineHeight: 22 / fontScale,
      fontStyle: 'italic',
    },
    bodyEmphasizedItalic: {
      fontSize: 17 / fontScale,
      fontFamily: fonts.medium,
      letterSpacing: -0.1,
      lineHeight: 22 / fontScale,
      fontStyle: 'italic',
    },
    calloutRegular: {
      fontSize: 16 / fontScale,
      fontFamily: fonts.regular,
      letterSpacing: -0.04,
      lineHeight: 22 / fontScale,
    },
    calloutEmphasized: {
      fontSize: 16 / fontScale,
      fontFamily: fonts.medium,
      letterSpacing: -0.15,
      lineHeight: 21 / fontScale,
    },
    calloutItalic: {
      fontSize: 16 / fontScale,
      fontFamily: fonts.regularItalic,
      letterSpacing: 0.07,
      lineHeight: 21 / fontScale,
    },
    calloutEmphasizedItalic: {
      fontSize: 16 / fontScale,
      fontFamily: fonts.medium,
      letterSpacing: 0.07,
      lineHeight: 21 / fontScale,
      fontStyle: 'italic',
    },
    subheadRegular: {
      fontSize: 15 / fontScale,
      fontFamily: fonts.regular,
      letterSpacing: -0.02,
      lineHeight: 21 / fontScale,
    },
    subheadEmphasized: {
      fontSize: 15 / fontScale,
      fontFamily: fonts.medium,
      letterSpacing: -0.039,
      lineHeight: 20 / fontScale,
    },
    subheadItalic: {
      fontSize: 15 / fontScale,
      fontFamily: fonts.regularItalic,
      letterSpacing: -0.05,
      lineHeight: 20 / fontScale,
    },
    subheadEmphasizedItalic: {
      fontSize: 15 / fontScale,
      fontFamily: fonts.medium,
      letterSpacing: -0.05,
      lineHeight: 20 / fontScale,
      fontStyle: 'italic',
    },
    footnoteRegular: {
      fontSize: 13 / fontScale,
      fontFamily: fonts.regular,
      lineHeight: 18 / fontScale,
    },
    footnoteEmphasized: {
      fontSize: 13 / fontScale,
      fontFamily: fonts.medium,
      lineHeight: 18 / fontScale,
    },
    footnoteStrong: {
      fontSize: 13 / fontScale,
      fontFamily: fonts.bold,
      lineHeight: 18 / fontScale,
    },
    footnoteItalic: {
      fontSize: 13 / fontScale,
      fontFamily: fonts.regularItalic,
      lineHeight: 18 / fontScale,
    },
    footnoteEmphasizedItalic: {
      fontSize: 13 / fontScale,
      fontFamily: fonts.medium,
      lineHeight: 18 / fontScale,
      fontStyle: 'italic',
    },
    caption1Regular: {
      fontSize: 12 / fontScale,
      fontFamily: fonts.regular,
      lineHeight: 16 / fontScale,
    },
    caption1Emphasized: {
      fontSize: 12 / fontScale,
      fontFamily: fonts.medium,
      lineHeight: 16 / fontScale,
    },
    caption1Italic: {
      fontSize: 12 / fontScale,
      fontFamily: fonts.regularItalic,
      lineHeight: 16 / fontScale,
    },
    caption1EmphasizedItalic: {
      fontSize: 12 / fontScale,
      fontFamily: fonts.medium,
      lineHeight: 16 / fontScale,
      fontStyle: 'italic',
    },
    caption2Regular: {
      fontSize: 11 / fontScale,
      fontFamily: fonts.regular,
      letterSpacing: -0.059,
      lineHeight: 13 / fontScale,
    },
    caption2Emphasized: {
      fontSize: 11 / fontScale,
      fontFamily: fonts.medium,
      letterSpacing: -0.059,
      lineHeight: 13 / fontScale,
    },
    caption2Italic: {
      fontSize: 11 / fontScale,
      fontFamily: fonts.regularItalic,
      letterSpacing: -0.059,
      lineHeight: 13 / fontScale,
    },
    caption2EmphasizedItalic: {
      fontSize: 11 / fontScale,
      fontFamily: fonts.medium,
      letterSpacing: -0.059,
      lineHeight: 13 / fontScale,
      fontStyle: 'italic',
    },
    headlineEmphasized: {
      fontSize: 17 / fontScale,
      fontFamily: fonts.medium,
      letterSpacing: -0.23,
      lineHeight: 22 / fontScale,
    },
  });
export default PlayyText;