import { Platform } from "react-native";

import checkIconWhite from "../images/check-icon-white.svg";
import sortArrows from "../images/sort-arrows.svg";
import linearGradientWhite from "../images/vertical-linear-gradient-grey.svg";
import { getSizes } from "../utils/theme";

const baseSizes = getSizes(4);
const systemFontStack =
  Platform.OS === "web"
    ? `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`
    : "System";

const baseTheme = {
  breakpoints: {
    xs: 480,
    sm: 768,
    md: 992,
    lg: 1280,
  },
  colors: {
    active: "#10966a",
    black: "#000000",
    border: "#D7DBDF",
    dark: "#232332",
    error: "red",
    focus: "#5050FA",
    green: "#25d298",
    grey: "#fbfcfd",
    inactive: "red",
    muted: "#fbfcfd",
    pending: "grey",
    primary: "#FF554B",
    red: "#f33b72",
    secondary: "#5959FE",
    tertiary: "#FFFFFF",
    text: "#333333",
    transparent: "transparent",
    white: "#ffffff",
    icon: {
      light: "#A7AAAC",
      muted: "#617177",
    },
    link: "#000000",
    ligtGrey: "#a8abad",
    modes: {
      dark: {
        background: "#2b2b37",
        border: "#363643",
        muted: "#333333",
        panelBackground: "#4d4d5c",
      },
    },
  },
  cropSizes: {
    "2:1": { width: 1200, height: 600 },
    "16:9": { width: 1200, height: 675 },
    "4:3": { width: 1200, height: 900 },
    "1:1": { width: 1200, height: 1200 },
    "3:4": { width: 900, height: 1200 },
    "9:16": { width: 675, height: 1200 },
    "1:2": { width: 600, height: 1200 },
  },
  fonts: {
    body: systemFontStack,
    heading: systemFontStack,
    mono: Platform.select({
      android: "monospace",
      ios: "Courier",
      web: `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
    }),
  },
  fontSizes: {
    xxxs: 8,
    xxs: 10,
    xs: 13,
    sm: 14,
    md: 16,
    lg: 18,
    xl: 20,
    xxl: 24,
    xxxl: 28,
    "4xl": 36,
    "5xl": 48,
    "6xl": 64,
  },
  fontWeights: {
    normal: "400",
    medium: "500",
    bold: "700",
  },
  lineHeights: {
    none: 1,
    normal: 1.33,
  },
  space: {
    ...baseSizes,
  },
  sizes: {
    ...baseSizes,
    full: "100%",
    half: "50%",
    third: "33.33%",
    quarter: "25%",
    "2xs": 256,
    xs: 320,
    sm: 384,
    md: 448,
    lg: 512,
    xl: 576,
  },
  styles: {
    h1: {
      fontSize: 36,
      lineHeight: 36 * 1.33,
    },
    h2: {
      fontSize: 24,
      lineHeight: 24 * 1.33,
    },
    h3: {
      fontSize: 20,
      lineHeight: 20 * 1.33,
      marginBottom: 9,
    },
    h4: {
      fontSize: 18,
      lineHeight: 18 * 1.33,
    },
    a: {
      color: "blue",
    },
    code: {
      fontFamily: Platform.select({
        android: "monospace",
        ios: "Courier",
        web: `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
      }),
    },
    em: {
      fontStyle: "italic",
    },
    strong: {
      fontWeight: "700",
    },
    p: {
      flexDirection: "row",
      marginBottom: 8,
    },
    ul: {
      paddingLeft: 40,
    },
    ol: {
      paddingLeft: 40,
    },
  },
  images: {
    checkmark: checkIconWhite,
    fade: linearGradientWhite,
    sortArrows,
  },
  variants: {
    buttons: {
      primary: {
        backgroundColor: "#FF554B",
      },
      secondary: {
        backgroundColor: "#5959FE",
      },
      tertiary: {
        backgroundColor: "#FFF",
      },
      muted: {
        backgroundColor: "#e2e3e5",
      },
    },
    text: {
      uppercase: {
        textTransform: "uppercase",
      },
      primary: {
        color: "#FFF",
      },
      secondary: {
        color: "#FFF",
      },
      tertiary: {
        color: "#8C9092",
      },
      muted: {
        color: "#617177",
      },
      label: {
        color: "#798d95",
        textTransform: "uppercase",
      },
    },
  },
};

export default baseTheme;