import { extendTheme } from '@chakra-ui/react';

const config = {
  initialColorMode: 'dark',
  useSystemColorMode: false,
};

const variantOutlined = () => ({
  field: {
    _focus: {
      borderColor: 'var(--chakra-colors-primary-500)',
      boxShadow: '0 0 0 2px var(--chakra-ui-primary-500)',
    },
  },
});

const variantFilled = () => ({
  field: {
    _focus: {
      borderColor: 'var(--chakra-colors-primary-500)',
      boxShadow: '0 0 0 1px var(--chakra-ui-focus-ring-color)',
    },
  },
});

const variantFlushed = () => ({
  field: {
    _focus: {
      borderColor: 'var(--chakra-colors-primary-500)',
      boxShadow: '0 1px 0 0 var(--chakra-colors-primary-500)',
    },
  },
});

const theme = extendTheme({
  config,
  colors: {
    primary: {
      100: 'red',
      200: '#81a540',
      300: '#9dcf44',
      400: 'yellow',
      500: '#81a540',
      600: '#6b8869',
      700: '#556b52',
      800: '#3f4e3b',
      900: '#293124',
    },
    secondary: '#',
  },
  shadows: { outline: '0 0 0 2px #81a540' },
  components: {
    Button: {
      defaultProps: {
        size: 'md',
      },
      variants: {
        solid: (props) => ({
          bg: props.colorScheme === 'primary' ? 'primary.500' : null,
          color: props.colorScheme === 'primary' ? 'white' : null,
        }),
      },
    },
    Textarea: {
      defaultProps: {
        size: 'md',
      },
      variants: {
        outline: variantOutlined,
        filled: variantFilled,
        flushed: variantFlushed,
      },
    },
    Input: {
      defaultProps: {
        size: 'md',
      },
      variants: {
        outline: variantOutlined,
        filled: variantFilled,
        flushed: variantFlushed,
      },
    },
  },
});

export default theme;
