import { Theme as ThemeUITheme } from 'styled-system';
import { addNegatives, xScale } from './space/create-scale';
import createTypeScale from './type';
import colors, { ThemeColors } from './colors';
import shadows from './shadows';

type Theme = ThemeUITheme & {
  colors: ThemeColors;
  mediaQueries?: {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    xxl: string;
  };
  styles: Object;
};

const scale = xScale(4)(500);
const typeScale = createTypeScale();

const BASE: Theme = {
  colors,
  space: {
    ...addNegatives(scale),
    release: 'calc(-50vw + 50%)',
    root: 0,
  },
  breakpoints: [
    '400px',
    '576px',
    '768px',
    '992px',
    '1024px',
    '1200px',
    '1600px',
  ],
  fontWeights: [0, 100, 200, 300, 400, 500, 600, 700, 800, 900],
  fonts: {
    0: 'Inter, "Helvetica Neue", Arial, sans-serif',
    1: 'Georgia, serif',
    2: 'Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace',
    sans: 'Inter, "Helvetica Neue", Arial, sans-serif',
    serif: 'Georgia, serif',
    mono: 'Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace',
  },
  fontSizes: { ...typeScale, root: typeScale[1] },
  lineHeights: {
    0: 0,
    1: 1,
    2: 1.5,
    root: 1,
  },
  shadows: {
    ...shadows,
    ghost: 'inset 0 0 0 1px currentColor',
  },
  letterSpacings: ['-0.05em', '-0.025em', '0.015em'],
  radii: {
    0: '0px',
    1: '2px',
    round: '50%',
  },
  sizes: null,
  mediaQueries: {
    xs: '',
    sm: '',
    md: '',
    lg: '',
    xl: '',
    xxl: '',
  },
  styles: {},
};

// Set up some named properties
const tokens = BASE;

tokens.sizes = tokens.space;

tokens.mediaQueries = {
  xs: `@media screen and (min-width: ${String(BASE.breakpoints[0])})`,
  sm: `@media screen and (min-width: ${String(BASE.breakpoints[1])})`,
  md: `@media screen and (min-width: ${String(BASE.breakpoints[2])})`,
  lg: `@media screen and (min-width: ${String(BASE.breakpoints[3])})`,
  xl: `@media screen and (min-width: ${String(BASE.breakpoints[5])})`,
  xxl: `@media screen and (min-width: ${String(BASE.breakpoints[6])})`,
};

tokens.styles = {
  root: {
    fontFamily: 'sans',
    fontSize: 'root',
    color: 'black',
    backgroundColor: 'white',
    lineHeight: '16px',
    WebkitFontSmoothing: 'subpixel-antialiased',
  },
};

export { Theme, ThemeColors, tokens as default };