import { FlipColors } from "@flip.id/ui-kit";
import { StyleSheet } from "react-native";
import { AppUtils } from "../utils";

export const enum IF2Fonts {
  "h1" = "h1",
  "h2" = "h2",
  "h3" = "h3",
  "h4" = "h4",
  "title" = "title",
  "subtitle" = "subtitle",
  "body1" = "body1",
  "body2" = "body2",
  "body3" = "body3",
  "buttonBig" = "buttonBig",
  "buttonSmall" = "buttonSmall",
  "label" = "label",
  "labelBold" = "labelBold",
  "status" = "status",
  "extraInfo" = "extraInfo",
  "bottomNav" = "bottomNav",
  "regular" = "regular",
  "bold" = "bold",
  "semiBold" = "semiBold",
  "default" = "default",
  "link" = "link",
  "underline" = "underline",
  "italic" = "italic",
  "title_2" = "title_2",
  "title_3" = "title_3",
  "title_4" = "title_4",
  "title_5" = "title_5",
  "title_6" = "title_6",
  "title_7" = "title_7",
  "subtitle_2" = "subtitle_2",
  "subtitle_3" = "subtitle_3",
  "subtitle_4" = "subtitle_4",
  "subtitle_5" = "subtitle_5",
  "subtitle_6" = "subtitle_6",
  "label_2" = "label_2",
  "label_3" = "label_3",
  "label_4" = "label_4",
  "label_5" = "label_5",
  "label_6" = "label_6",
  "label_7" = "label_7",
  "label_form" = "label_form",
  "sublabel" = "sublabel",
  "sublabel_2" = "sublabel_2",
  "icon" = "icon",
  "mini_button" = "mini_button",
  "button" = "button",
  "button_2" = "button_2",
  "button_orange" = "button_orange",
}

const fonts = StyleSheet.create({
  //// DISPLAY
  // H1-Greeting
  h1: {
    fontSize: 28.0,
    color: FlipColors.neutral.MainText,
    fontFamily: "ProximaNova-Bold",
  },
  // H2-Hightlight
  h2: {
    fontSize: 22.0,
    color: FlipColors.neutral.MainText,
    fontFamily: "ProximaNova-Semibold",
  },

  //// TITLE
  // H3-Subgreeting
  h3: {
    fontSize: 18.0,
    color: FlipColors.neutral.MainText,
    fontFamily: "ProximaNova-Bold",
  },
  // H4-Header
  h4: {
    fontSize: 16.0,
    color: FlipColors.neutral.MainText,
    fontFamily: "ProximaNova-Semibold",
  },
  // Content Title
  title: {
    fontFamily: "ProximaNova-Bold",
    color: FlipColors.neutral.MainText,
    textAlign: "center",
    fontSize: 16,
    lineHeight: 24,
  },
  // Content Subtitle
  subtitle: {
    fontFamily: "ProximaNova-Medium",
    color: FlipColors.neutral.MainText,
    textAlign: "center",
    fontSize: 14,
    lineHeight: 21,
    marginBottom: 15,
  },

  //// BODY
  // Content Body 1
  body1: {
    fontSize: 14.0,
    color: FlipColors.neutral.MainText,
    fontFamily: "ProximaNova-Medium",
  },
  // Content Body 2
  body2: {
    fontSize: 13.0,
    color: FlipColors.neutral.MainText,
    fontFamily: "ProximaNova-Medium",
  },
  // Content Body 2
  body3: {
    fontSize: 12.0,
    color: FlipColors.neutral.MainText,
    fontFamily: "ProximaNova-Medium",
  },

  //// BUTTON
  // Button Big
  buttonBig: {
    fontSize: 14.0,
    color: FlipColors.neutral.SecondaryText,
    fontFamily: "ProximaNova-Bold",
  },
  // Button Small
  buttonSmall: {
    fontSize: 12.0,
    color: FlipColors.neutral.MainText,
    fontFamily: "ProximaNova-Bold",
  },

  //// INFORMATION
  // Label Regular
  label: {
    fontFamily: "ProximaNova-Bold",
    color: FlipColors.neutral.MainText,
    fontSize: 13,
    lineHeight: 19.5,
  },
  // Label Bold
  labelBold: {
    fontSize: 13.0,
    color: FlipColors.neutral.MainText,
    fontFamily: "ProximaNova-Semibold",
  },
  // Status
  status: {
    fontSize: 11.0,
    color: FlipColors.neutral.MainText,
    fontFamily: "ProximaNova-Medium", // TODO: Italic
  },
  // Extra Information
  extraInfo: {
    fontSize: 12.0,
    color: FlipColors.neutral.MainText,
    fontFamily: "ProximaNova-Medium", // TODO: Italic
  },
  // Bottom Navigation
  bottomNav: {
    fontSize: 12.0,
    color: FlipColors.neutral.MainText,
    fontFamily: "ProximaNova-Medium",
  },

  // Font Weight
  regular: {
    fontFamily: "ProximaNova-Medium",
  },
  bold: {
    fontFamily: "ProximaNova-Bold",
  },
  semiBold: {
    fontFamily: "ProximaNova-Semibold",
  },
  //scalableText
  //styles
  default: {
    fontFamily: "ProximaNova-Medium",
    color: FlipColors.neutral.MainText,
    fontSize: 13,
  },
  link: {
    fontSize: 12.0,
    color: FlipColors.flipOrange.Main,
    fontFamily: "ProximaNova-Bold",
  },

  underline: {
    textDecorationLine: "underline",
  },
  italic: {
    fontFamily: AppUtils.isIOS()
      ? "ProximaNova-MediumIt"
      : "ProximaNova-Medium-It",
  },

  //mode styles

  title_2: {
    fontFamily: "ProximaNova-Medium",
    color: FlipColors.neutral.MainText,
    textAlign: "left",
    fontSize: 16,
    lineHeight: 24,
  },
  title_3: {
    fontFamily: "ProximaNova-Bold",
    color: FlipColors.neutral.MainText,
    textAlign: "left",
    fontSize: 22,
    lineHeight: 33,
  },
  title_4: {
    fontFamily: "ProximaNova-Bold",
    color: FlipColors.neutral.White,
    textAlign: "left",
    fontSize: 26,
    lineHeight: 39,
  },
  title_5: {
    fontFamily: "ProximaNova-Bold",
    color: FlipColors.neutral.MainText,
    textAlign: "center",
    fontSize: 14,
    lineHeight: 21,
  },
  title_6: {
    fontFamily: "ProximaNova-Medium",
    color: FlipColors.neutral.MainText,
    textAlign: "left",
    fontSize: 20,
    lineHeight: 28,
  },
  title_7: {
    fontFamily: "ProximaNova-Bold",
    fontSize: 22,
    lineHeight: 36,
  },

  subtitle_2: {
    fontFamily: "ProximaNova-Medium",
    color: FlipColors.neutral.MainText,
    textAlign: "left",
    fontSize: 15,
    lineHeight: 22.5,
    marginBottom: 20,
  },
  subtitle_3: {
    fontFamily: AppUtils.isIOS()
      ? "ProximaNova-MediumIt"
      : "ProximaNova-Medium-It",
    color: FlipColors.neutral.MainText,
    textAlign: "left",
    fontSize: 14,
    lineHeight: 21,
    marginBottom: 20,
  },
  subtitle_4: {
    fontFamily: "ProximaNova-Medium",
    color: FlipColors.neutral.White,
    textAlign: "left",
    fontSize: 18,
    lineHeight: 27,
    marginBottom: 20,
  },
  subtitle_5: {
    fontFamily: "ProximaNova-Medium",
    color: FlipColors.neutral.MainText,
    textAlign: "center",
    fontSize: 13,
    lineHeight: 19.5,
    marginBottom: 5,
  },
  subtitle_6: {
    fontFamily: "ProximaNova-Medium",
    color: FlipColors.neutral.MainText,
    textAlign: "left",
    fontSize: 16,
    lineHeight: 24,
    marginBottom: 20,
  },

  label_2: {
    fontFamily: "ProximaNova-Bold",
    color: FlipColors.neutral.MainText,
    fontSize: 14,
    lineHeight: 21,
  },
  label_3: {
    fontFamily: "ProximaNova-Bold",
    fontSize: 11,
    lineHeight: 16.5,
    textAlign: "center",
  },
  label_4: {
    fontFamily: "ProximaNova-Medium",
    color: FlipColors.neutral.MainText,
    fontSize: 10,
    lineHeight: 15,
    textAlign: "center",
  },
  label_5: {
    fontFamily: "ProximaNova-Medium",
    color: FlipColors.neutral.MainText,
    fontSize: 24,
    lineHeight: 36,
    textAlign: "center",
  },
  label_6: {
    fontFamily: "ProximaNova-Medium",
    color: FlipColors.neutral.MainText,
    fontSize: 11,
    lineHeight: 16.5,
    textAlign: "center",
    marginTop: 8,
  },
  label_7: {
    fontFamily: "ProximaNova-Medium",
    color: FlipColors.neutral.MainText,
    fontSize: 10,
    lineHeight: 15,
    textAlign: "center",
    marginTop: 8,
  },
  label_form: {
    fontFamily: "ProximaNova-Bold",
    color: FlipColors.neutral.MainText,
    fontSize: 13,
    lineHeight: 19.5,
    marginBottom: 8,
  },
  sublabel: {
    fontFamily: "ProximaNova-Medium",
    color: FlipColors.neutral.MainText,
    fontSize: 12,
    lineHeight: 18,
  },
  sublabel_2: {
    fontFamily: AppUtils.isIOS()
      ? "ProximaNova-MediumIt"
      : "ProximaNova-Medium-It",
    color: FlipColors.neutral.Placeholder,
    fontSize: 10,
    lineHeight: 15,
    textAlign: "right",
    marginTop: 2,
  },
  icon: {
    fontFamily: "ProximaNova-Medium",
    color: FlipColors.neutral.MainText,
    textAlign: "center",
    fontSize: 14,
    lineHeight: 21,
    marginBottom: 20,
  },
  mini_button: {
    fontFamily: "ProximaNova-Bold",
    color: FlipColors.neutral.MainText,
    textAlign: "center",
    fontSize: 12,
    lineHeight: 18,
  },
  button: {
    fontFamily: "ProximaNova-Bold",
    color: FlipColors.neutral.MainText,
    fontSize: 13,
    lineHeight: 19.5,
    marginBottom: 2,
  },
  button_2: {
    fontFamily: "ProximaNova-Bold",
    color: FlipColors.neutral.MainText,
    fontSize: 13,
    lineHeight: 19.5,
    marginBottom: 2,
  },
  button_orange: {
    fontFamily: "ProximaNova-Bold",
    color: FlipColors.neutral.White,
    fontSize: 13,
    lineHeight: 19.5,
    marginBottom: 2,
  },
});

export default fonts;