import React from "react";

import { Client as Styletron } from "styletron-engine-atomic";
import { Provider as StyletronProvider } from "styletron-react";
import { BaseProvider, createTheme } from "baseui";
import { BrandColors } from "./tokens/colors";
import { FontFamily } from "./tokens/typography";

const primitives = {
  primary: BrandColors.primary.toString(),
  accent: BrandColors.accent.toString(),
  white: BrandColors.white.toString(),
  black: BrandColors.black.toString(),
};

const overrides = {
  grid: {
    columns: [4, 8, 12],
    gutters: 0,
    margins: [16, 36, 64],
    gaps: 0,
    maxWidth: 1280,
  },
  primaryFontFamily: FontFamily.roboto,
};

const customTheme = createTheme(primitives, overrides);

const engine = new Styletron();

/**
 * A provider for the BaseUI theme and the respective config
 */
export const ThemeProvider: React.FC = ({ children }) => {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={customTheme}>{children}</BaseProvider>
    </StyletronProvider>
  );
};