import React from "react";

// import COLORS & SIZES
import LC_COLORS from "./colors";
import LC_SIZES from "./sizes";
import LC_Settings from "./settings";
// default theme with COLORS & SIZES
const BETheme = {
  SETTINGS: LC_Settings,
  COLORS: LC_COLORS,
  SIZES: LC_SIZES
};

export default BETheme;

// creating the BETheme context
const LCContext = React.createContext({});

/*
 *   withBE
 *   args: Component - React Component, styles to be added to Component
 *   theme: if no styles or theme add default theme={ SIZES, COLORS }
 */

export function withBE(Component, styles) {
  // eslint-disable-next-line react/no-multi-comp
  return class extends React.Component {
    render() {
      const { props } = this;
      return <LCContext.Consumer>{theme => <Component {...props} theme={{ ...BETheme, ...theme }} styles={styles && styles({ ...BETheme, ...theme })} />}</LCContext.Consumer>;
    }
  };
}

/*
 *   BEProvider using React.Component
 *   LCContext.Provider value has the default value from { COLORS, SIZES }
 */

// eslint-disable-next-line react/no-multi-comp

export const BEProvider: React.FC<Props> = props => {
  const { theme, children } = props;
  const { COLORS: CUSTOM_COLORS, SIZES: CUSTOM_SIZES, customTheme } = theme;
  const providerTheme = {
    COLORS: { ...BETheme.COLORS, ...CUSTOM_COLORS },
    SIZES: { ...BETheme.SIZES, ...CUSTOM_SIZES },
    ...customTheme
  };
  return <LCContext.Provider value={providerTheme}>{children}</LCContext.Provider>;
};

//Props Type ? for optional props
type Props = {
  children: any;
  theme: any;
};
//default props 4
BEProvider.defaultProps = { children: null, theme: {} };