import { createTheme } from '@mui/material/styles';
import createSpacing from '@mui/system/createTheme/createSpacing';
import './styles.css'; // to ensure that "ui/ui.umd.css" is created

const fontWeights = {
  regular: 400,
  medium: 500,
  semiBold: 600
};

const fontSizes = {
  0: '12px',
  1: '14px',
  2: '15px',
  3: '16px',
  4: '20px',
  5: '24px',
  6: '36px'
};

const primaryTextColor = '#394463';
const secondaryTextColor = '#546491';
const emptyColor = '#a943f7';

const colors = {
  secondary: {
    0: emptyColor,
    100: '#F2F7FF',
    200: '#EAF2FF',
    300: '#D6E6FF',
    400: '#B4D1FF',
    500: '#266FE2',
    600: '#205CBA',
    700: '#1A4C9A',
    800: emptyColor,
    900: emptyColor,
    main: '#266FE2',
    light: '#D6E6FF',
    dark: '#1A4C9A'
  },
  primary: {
    0: emptyColor,
    100: '#CBD2E2',
    200: '#D9E3F0',
    300: '#BBC9E8',
    400: secondaryTextColor,
    500: primaryTextColor,
    600: '#272E44',
    700: emptyColor,
    800: emptyColor,
    900: emptyColor,
    light: '#BBC9E8',
    main: primaryTextColor,
    dark: emptyColor
  },
  error: {
    0: emptyColor,
    100: emptyColor,
    200: '#FFDCE0',
    300: emptyColor,
    400: emptyColor,
    500: '#FD596F',
    600: '#E04B5F',
    700: emptyColor,
    800: emptyColor,
    900: emptyColor,
    main: '#FD596F',
    light: emptyColor,
    dark: emptyColor
  },
  success: {
    0: emptyColor,
    100: emptyColor,
    200: '#E2F9F4',
    300: emptyColor,
    400: emptyColor,
    500: '#44D7B6',
    600: emptyColor,
    700: '#288772',
    800: emptyColor,
    900: emptyColor,
    main: '#44D7B6',
    light: emptyColor,
    dark: emptyColor
  },
  warning: {
    0: emptyColor,
    100: emptyColor,
    200: '#FFFAEF',
    300: emptyColor,
    400: emptyColor,
    500: '#FFC955',
    600: emptyColor,
    700: emptyColor,
    800: emptyColor,
    900: emptyColor,
    main: '#FFC955',
    light: emptyColor,
    dark: emptyColor
  },
  info: {
    0: emptyColor,
    100: emptyColor,
    200: emptyColor,
    300: emptyColor,
    400: emptyColor,
    500: emptyColor,
    600: emptyColor,
    700: emptyColor,
    800: emptyColor,
    900: emptyColor,
    main: emptyColor,
    light: emptyColor,
    dark: emptyColor
  },
  text: {
    primary: primaryTextColor,
    secondary: secondaryTextColor
  },
  specialColors: {
    1: '#4374E0',
    2: '#DC3912',
    3: '#109618',
    4: '#E49307',
    5: '#990099',
    6: '#0099C6',
    7: '#C2185B',
    8: '#64C369',
    9: '#4DC9F6',
    10: '#F1CA3A',
    11: '#A7260C',
    12: '#67B4AE',
    13: '#CB5BCB',
    14: '#D95F27',
    15: '#298679',
    16: '#F06292'
  },
  chart: {
    grid: '#dde6f2',
    tooltipHover: '#f6faff'
  }
};

export const { palette: _palette } = createTheme({
  palette: {
    ...colors,
    text: {
      primary: primaryTextColor,
      secondary: secondaryTextColor
    },
    background: {
      default: colors.secondary[100],
      verticalDivider: 'linear-gradient(180deg, #D9E3F000 0%, #D9E3F0 52%, #D9E3F000 100%)',
      filters: colors.secondary[100],
      scrollbar: '#ADB6C9',
      tableFirstColumn: 'linear-gradient(90deg, #347FF71A 0%, #347FF700 50%)'
    },
    navigationSidebar: {
      background: 'linear-gradient(0deg, #2F4981 0%, #1F3156 100%)',
      fontColor: '#FFFFFF',
      fontSelected: '#9AAEDB',
      hoverActive: '#2D467C',
      icon: '#FFFFFF',
      newText: '#266FE2',
      newBg: '#DFEBFF',
      titleColor: '#FFFFFF'
    }
  }
});

export const spacing = createSpacing(8);

export const baseTypography = {
  fontFamily: "'Inter', sans-serif",
  fontWeightBold: fontWeights.semiBold,
  h1: {
    fontSize: fontSizes[6],
    fontWeight: fontWeights.medium,
    lineHeight: 1.2222
  },
  h2: {
    fontSize: fontSizes[5],
    fontWeight: fontWeights.medium,
    lineHeight: 1.2917
  },
  h3: {
    fontSize: fontSizes[4],
    fontWeight: fontWeights.medium,
    lineHeight: 1.2
  },
  h4: {
    fontSize: fontSizes[3],
    fontWeight: fontWeights.medium,
    lineHeight: 1.25
  },
  h5: {
    fontSize: fontSizes[2],
    fontWeight: fontWeights.medium,
    lineHeight: 1.2667
  },
  h6: {
    fontSize: fontSizes[1],
    fontWeight: fontWeights.medium,
    lineHeight: 1.2143
  },
  subtitle1: {
    fontSize: fontSizes[1],
    fontWeight: fontWeights.regular,
    lineHeight: 1.3571
  },
  body1: {
    fontSize: fontSizes[3],
    fontWeight: fontWeights.regular,
    lineHeight: 1.5
  },
  body2: {
    fontSize: fontSizes[1],
    fontWeight: fontWeights.regular,
    lineHeight: 1.5
  },
  interactive1: {
    fontSize: fontSizes[3],
    fontWeight: fontWeights.medium,
    fontFamily: "'Inter', sans-serif",
    lineHeight: 1.5
  },
  interactive2: {
    fontSize: fontSizes[1],
    fontWeight: fontWeights.regular,
    fontFamily: "'Inter', sans-serif",
    lineHeight: 1.5
  },
  caption1: {
    fontSize: fontSizes[0],
    fontWeight: fontWeights.regular,
    fontFamily: "'Inter', sans-serif",
    lineHeight: 1.25
  },
  caption2: {
    fontSize: fontSizes[0],
    fontWeight: fontWeights.medium,
    fontFamily: "'Inter', sans-serif",
    lineHeight: 1.25
  }
};

export const { typography: _typography } = createTheme({
  typography: {
    ..._palette,
    ...baseTypography
  }
});

export const transitions = {
  easing: {
    // This is the most common easing curve.
    easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
    // Objects enter the screen at full velocity from off-screen and
    // slowly decelerate to a resting point.
    easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
    // Objects leave the screen at full velocity. They do not decelerate when off-screen.
    easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
    // The sharp curve is used by objects that may return to the screen at any time.
    sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
  },
  duration: {
    shortest: 100,
    shorter: 200,
    short: 250,
    // most basic recommended timing
    standard: 300,
    // this is to be used in complex animations
    complex: 375,
    // recommended when something is entering screen
    enteringScreen: 225,
    // recommended when something is leaving screen
    leavingScreen: 195
  }
};

export const scrollWidth = 4;