import { getThemeRefs, getThemeVars } from '../helpers/themeHelpers';
import { genColors } from '../helpers/themeHelpers/colorsHelpers';

const direction = 'ltr';

export const colors = genColors({
  surface: {
    main: '#ffffff',
    dark: '#636c74',
    light: '#cfd3d7',
    highlight: '#f4f5f6',
    contrast: '#181a1c',
  },
  primary: {
    main: '#006af5',
    dark: '#004094',
    light: '#71aeff',
    highlight: '#f0f6ff',
    contrast: '#ffffff',
  },
  secondary: {
    main: '#802ed6',
    dark: '#6410bc',
    light: '#be89f5',
    highlight: '#ede7f6',
    contrast: '#ffffff',
  },
  success: {
    main: '#008000',
    dark: '#005700',
    light: '#8bc38b',
    highlight: '#f5faf5',
    contrast: '#ffffff',
  },
  error: {
    main: '#e21d12',
    dark: '#b3170f',
    light: '#f4807a',
    highlight: '#fef1f1',
    contrast: '#ffffff',
  },
  warning: {
    main: '#c45512',
    dark: '#a24309',
    light: '#ff985a',
    highlight: '#fdf0e5',
    contrast: '#ffffff',
  },
});

const fonts = {
  font1: {
    family: [
      'Roboto',
      'ui-sans-serif',
      'system-ui',
      '-apple-system',
      'BlinkMacSystemFont',
      'Segoe UI',
      'Helvetica Neue',
      'Arial',
      'Noto Sans',
      'sans-serif',
      'Apple Color Emoji',
      'Segoe UI Emoji',
      'Segoe UI Symbol',
      'Noto Color Emoji',
    ],
    label: 'Roboto',
    url: 'https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900',
  },
  font2: {
    family: [
      'ui-sans-serif',
      'system-ui',
      '-apple-system',
      'BlinkMacSystemFont',
      'Segoe UI',
      'Roboto',
      'Helvetica Neue',
      'Arial',
      'Noto Sans',
      'sans-serif',
      'Apple Color Emoji',
      'Segoe UI Emoji',
      'Segoe UI Symbol',
      'Noto Color Emoji',
    ],
    label: 'Sans Serif',
  },
};

const fontsRef = getThemeRefs({ fonts }).fonts;

const typography = {
  h1: {
    font: fontsRef.font1.family,
    weight: '900',
    size: '48px',
  },
  h2: {
    font: fontsRef.font1.family,
    weight: '800',
    size: '38px',
  },
  h3: {
    font: fontsRef.font1.family,
    weight: '600',
    size: '28px',
  },
  subtitle1: {
    font: fontsRef.font2.family,
    weight: '500',
    size: '22px',
  },
  subtitle2: {
    font: fontsRef.font2.family,
    weight: '400',
    size: '20px',
  },
  body1: {
    font: fontsRef.font1.family,
    weight: '400',
    size: '16px',
  },
  body2: {
    font: fontsRef.font1.family,
    weight: '400',
    size: '14px',
  },
};

const spacing = {
  xs: '2px',
  sm: '4px',
  md: '8px',
  lg: '16px',
  xl: '32px',
};

const border = {
  xs: '1px',
  sm: '2px',
  md: '3px',
  lg: '4px',
  xl: '5px',
};

const radius = {
  xs: '5px',
  sm: '10px',
  md: '15px',
  lg: '20px',
  xl: '25px',
  '2xl': '30px',
  '3xl': '35px',
};

const shadow = {
  wide: {
    sm: '0 2px 3px -0.5px',
    md: '0 4px 6px -1px',
    lg: '0 10px 15px -3px',
    xl: '0 20px 25px -5px',
    '2xl': '0 25px 50px -12px',
  },
  narrow: {
    sm: '0 1px 2px -1px',
    md: '0 2px 4px -2px',
    lg: '0 4px 6px -4px',
    xl: '0 8px 10px -6px',
    '2xl': '0 16px 16px -8px',
  },
};

const globals = {
  colors,
  typography,
  spacing,
  border,
  radius,
  shadow,
  fonts,
  direction,
};

export default globals;
export const vars = getThemeVars(globals);
