import React, { useContext } from "react";
import {
  BodyXLarge,
  BodyLarge,
  BodyMedium,
  BodySmall,
  BodyXSmall,
  HtmlContent,
} from "./styles";
import { flexAlign } from "native/atoms/Typography/helpers";
import { IFontWeight } from "interfaces";
import { ITypographyProps } from "native/atoms/Typography/TypographyProps";
import { ThemeContext } from "context/context";
import { theme } from "data/dataMx";

export const AtomBody = ({
  size,
  text,
  color,
  weight = "regular",
  align = "center",
  styles = {},
  isHTML = false,
  onPress,
}: ITypographyProps) => {
  const { fontFamily } = useContext(ThemeContext);
  const font: string = fontFamily.main[weight as keyof IFontWeight];
  const fontWeight: number =
    fontFamily.weight[font as keyof typeof fontFamily.weight];

  switch (size) {
    case "xlarge":
      return (
        <BodyXLarge
          color={color ? theme[color] : theme.neutral700}
          font={font}
          align={align}
          fontWeight={fontWeight}
          styles={styles}
        >
          {isHTML ? (
            <HtmlContent
              baseStyle={{ fontSize: "18px" }}
              source={{ html: text }}
            />
          ) : (
            text
          )}
        </BodyXLarge>
      );
    case "large":
      return (
        <BodyLarge
          color={color ? theme[color] : theme.neutral700}
          font={font}
          align={align}
          fontWeight={fontWeight}
          styles={styles}
        >
          {isHTML ? (
            <HtmlContent
              baseStyle={{ fontSize: "16px" }}
              source={{ html: text }}
            />
          ) : (
            text
          )}
        </BodyLarge>
      );
    case "medium":
      return (
        <BodyMedium
          color={color ? theme[color] : theme.neutral700}
          font={font}
          align={align}
          fontWeight={fontWeight}
          styles={styles}
          onPress={onPress}
        >
          {isHTML ? (
            <HtmlContent
              baseStyle={{ fontSize: "14px" }}
              source={{ html: text }}
            />
          ) : (
            text
          )}
        </BodyMedium>
      );
    case "small":
      return (
        <BodySmall
          color={color ? theme[color] : theme.neutral700}
          font={font}
          align={align}
          fontWeight={fontWeight}
          styles={styles}
        >
          {isHTML ? (
            <HtmlContent
              baseStyle={{ fontSize: "12px" }}
              source={{ html: text }}
            />
          ) : (
            text
          )}
        </BodySmall>
      );
    case "xsmall":
      return (
        <BodyXSmall
          color={color ? theme[color] : theme.neutral700}
          font={font}
          fontWeight={fontWeight}
          align={align}
        >
          {isHTML ? (
            <HtmlContent
              baseStyle={{ fontSize: "11px" }}
              source={{ html: text }}
            />
          ) : (
            text
          )}
        </BodyXSmall>
      );
  }
};
