import React, { createContext, useContext, useMemo } from 'react';

export const FormControlContext = createContext(null);

export const UIContext = createContext(null);

export const commonInputDefaults = {
  size: 'medium',
  theme: 'light',
  colorStyle: 'default',
  rounded: 'both'
};

const pick = (obj, keys) => {
  const result = {};
  keys.forEach((key) => {
    if (obj && key in obj) result[key] = obj[key];
  });
  return result;
};

const useContextWithUI = (props, defaultProps, pickContextValues, specificContext) => {
  const uiContext = useContext(UIContext);

  return useMemo(() => {
    const mergedContext = { ...defaultProps };
    if (uiContext) {
      const pickedUIContext = pick(
        uiContext,
        pickContextValues.filter(key => key in uiContext)
      );
      Object.assign(mergedContext, pickedUIContext);
    }
    if (specificContext) {
      const pickedSpecific = pick(specificContext, pickContextValues);
      Object.assign(mergedContext, pickedSpecific);
    }
    Object.assign(mergedContext, props);
    return mergedContext;
  }, [specificContext, uiContext, props, defaultProps, pickContextValues]);
};

const contextValuesArray = [
  'colorStyle', 'disabled', 'readOnly', 'required', 'size', 'theme', 'id', 'compact', 'rounded'
];

export const useFormControl = (props, defaultProps, pickContextValues = contextValuesArray) => {
  const formControlContext = useContext(FormControlContext);
  return useContextWithUI(props, defaultProps, pickContextValues, formControlContext);
};

export const useUIContext = (props, defaultProps, pickContextValues = ['theme', 'size']) => {
  const uiContext = useContext(UIContext);
  return useContextWithUI(props, defaultProps, pickContextValues, uiContext);
};