import React, { useContext } from "react";
import { flexAlign } from "native/atoms/Typography/helpers";
import {
  HeadlineXLarge,
  HeadlineLarge,
  HeadlineMedium,
  HeadlineSmall,
  HeadlineXSmall,
  HtmlContent,
} from "./styles";
import { ISetup, IFontWeight } from "interfaces";
import { ITypographyProps } from "native/atoms/Typography/TypographyProps";
import { ThemeContext } from "context/context";
import { mxSetup, theme } from "data/dataMx";
import { Dimensions } from "react-native";

export const AtomHeadline = ({
  align = "center",
  size,
  text,
  color,
  weight = "thin",
  styles = {},
  isHTML = false,
}: ITypographyProps) => {
  const { fontFamily } = useContext<ISetup>(ThemeContext);
  const font: string = fontFamily.main[weight as keyof IFontWeight];
  const fontWeight: number =
    fontFamily.weight[font as keyof typeof fontFamily.weight];
  const {
    mediaQuery: { tablet, mobile },
  } = mxSetup;
  const windowWidth = Dimensions.get("window").width;
  const widthMovileMax = mobile?.max
    ? parseInt(mobile.max.replace("px", ""))
    : 0;
  const widthTabletMin = tablet?.min
    ? parseInt(tablet.min.replace("px", ""))
    : 0;
  const widthTabletMax = tablet?.max
    ? parseInt(tablet.max.replace("px", ""))
    : 0;

  switch (size) {
    case "xlarge":
      return (
        <HeadlineXLarge
          color={color ? theme[color] : theme.neutral700}
          font={font}
          fontWeight={fontWeight}
          align={flexAlign[align].value}
          styles={styles}
        >
          {isHTML ? (
            <HtmlContent
              baseStyle={{
                fontSize:
                  windowWidth < widthMovileMax
                    ? "24px"
                    : windowWidth > widthTabletMin &&
                      windowWidth < widthTabletMax
                    ? "32px"
                    : "34px",
              }}
              source={{ html: text }}
            />
          ) : (
            text
          )}
        </HeadlineXLarge>
      );
    case "large":
      return (
        <HeadlineLarge
          color={color ? theme[color] : theme.neutral700}
          font={font}
          fontWeight={fontWeight}
          align={flexAlign[align].value}
          styles={styles}
        >
          {isHTML ? (
            <HtmlContent
              baseStyle={{
                fontSize:
                  windowWidth < widthMovileMax
                    ? "18px"
                    : windowWidth > widthTabletMin &&
                      windowWidth < widthTabletMax
                    ? "24px"
                    : "28px",
              }}
              source={{ html: text }}
            />
          ) : (
            text
          )}
        </HeadlineLarge>
      );
    case "medium":
      return (
        <HeadlineMedium
          color={color ? theme[color] : theme.neutral700}
          font={font}
          fontWeight={fontWeight}
          align={flexAlign[align].value}
          styles={styles}
        >
          {isHTML ? (
            <HtmlContent
              baseStyle={{
                fontSize:
                  windowWidth < widthMovileMax
                    ? "16px"
                    : windowWidth > widthTabletMin &&
                      windowWidth < widthTabletMax
                    ? "20px"
                    : "24px",
              }}
              source={{ html: text }}
            />
          ) : (
            text
          )}
        </HeadlineMedium>
      );
    case "small":
      return (
        <HeadlineSmall
          color={color ? theme[color] : theme.neutral700}
          font={font}
          fontWeight={fontWeight}
          align={flexAlign[align].value}
          styles={styles}
        >
          {isHTML ? (
            <HtmlContent
              baseStyle={{
                fontSize: windowWidth < widthMovileMax ? "14px" : "16px",
              }}
              source={{ html: text }}
            />
          ) : (
            text
          )}
        </HeadlineSmall>
      );
    case "xsmall":
      return (
        <HeadlineXSmall
          color={color ? theme[color] : theme.neutral700}
          font={font}
          fontWeight={fontWeight}
          align={flexAlign[align].value}
          styles={styles}
        >
          {isHTML ? (
            <HtmlContent
              baseStyle={{
                fontSize: windowWidth < widthMovileMax ? "13px" : "14px",
              }}
              source={{ html: text }}
            />
          ) : (
            text
          )}
        </HeadlineXSmall>
      );
  }
};
