import {
  SystemConfig,
  createSystem,
  defaultConfig,
  mergeConfigs,
} from '@chakra-ui/react';

import { colors } from './colors';

const baseTheme: SystemConfig = {
  globalCss: {
    body: {
      overflowY: 'none',
      bg: { _light: 'back.50', _dark: 'back.700' },
      color: { _light: 'text.900', _dark: 'text.50' },
      fontFamily: 'Roboto, Helvetica, Arial, "sans-serif"',
      userSelect: 'none' /* Prevents text selection */,
    },
    svg: {
      width: '32px',
      height: '32px',
      aspectRatio: 'square',
    },
  },
  theme: {
    slotRecipes: {
      dialog: {
        slots: ['header'],
        base: {
          header: {
            fontWeight: 'bold',
            fontSize: '2xl',
            color: { _dark: 'brand.400', _light: 'brand.500' },
          },
        },
      },
    },
    recipes: {
      button: {
        base: {
          borderRadius: 0,
          _hover: {
            boxShadow: {
              _light: '0 8px 20px #000000e6',
              _dark: '0 8px 20px #000000e6',
            },
          },
          transitionDuration: 'slower',
        },
      },
      input: {
        base: {
          borderRadius: 0,
          _hover: {
            boxShadow: {
              _light: '0 2px 5px #000000e6',
              _dark: '0 2px 5px #000000e6',
            },
          },
          //borderColor: { _light: "gray.800", _dark: "gray.50" },
          backgroundColor: { _light: 'gray.200', _dark: 'gray.700' },
          transitionDuration: 'slower',
        },
      },
    },
    tokens: {
      fonts: {
        heading: { value: `Roboto, Helvetica, Arial, "sans-serif"` },
        body: { value: `Roboto, Helvetica, Arial, "sans-serif"` },
      },
      colors,
    },
    semanticTokens: {
      colors: {
        '@danger': {
          solid: { value: '{colors.danger.500}' },
          contrast: { value: '{colors.danger.100}' },
          fg: { value: '{colors.danger.900}' },
          muted: { value: '{colors.danger.100}' },
          subtle: { value: '{colors.danger.200}' },
          emphasized: { value: '{colors.danger.300}' },
          focusRing: { value: '{colors.danger.500}' },
        },
        brand: {
          solid: { value: '{colors.brand.500}' },
          contrast: { value: '{colors.brand.100}' },
          fg: { value: '{colors.brand.900}' },
          muted: { value: '{colors.brand.100}' },
          subtle: { value: '{colors.brand.200}' },
          emphasized: { value: '{colors.brand.300}' },
          focusRing: { value: '{colors.brand.500}' },
        },
      },
    },
  },
};
const config = mergeConfigs(defaultConfig, baseTheme);
//console.log("defaultConfig: " + JSON.stringify(defaultConfig, null, 2));
export const systemTheme = createSystem(config);