import React, { ReactNode } from 'react';
import { SchemaFieldTypes } from '@vev/utils';

export type SilkeFormSchemaExtendedField = {
  type: keyof SchemaFieldTypes;
  field: (props: unknown) => JSX.Element;
};

type SilkeSchemaScopeProps = {
  context: SilkeFormSchemaExtendedField[];
  children?: ReactNode;
};

const SilkeExtendedFields = React.createContext<SilkeFormSchemaExtendedField[]>([]);

export function useExtendedFields() {
  return React.useContext(SilkeExtendedFields);
}

export function SilkeExtendedFieldsContext({ context, children }: SilkeSchemaScopeProps) {
  return <SilkeExtendedFields.Provider value={context}>{children}</SilkeExtendedFields.Provider>;
}