import React, { useContext } from 'react';
import { SilkeTextFieldProps } from './silke-text-field';
import { SilkeColor } from '../../silke-theme-provider';

type TextFieldContextType = Pick<SilkeTextFieldProps, 'kind' | 'size' | 'inline' | 'readOnly'> & {
  color?: SilkeColor;
};
type TextFieldContextProps = {
  children: React.ReactNode;
} & TextFieldContextType;

const Context = React.createContext<TextFieldContextType>({});
Context.displayName = 'SilkeTextFieldContext';

export function useTextFieldContext() {
  return useContext(Context);
}

export default function TextFieldContext({ children, ...rest }: TextFieldContextProps) {
  const currentContext = useContext(Context);
  return <Context.Provider value={{ ...currentContext, ...rest }}>{children}</Context.Provider>;
}