import { LocalVariable, Schema, SchemaContextModel } from '@vev/utils';
import React from 'react';
import { SilkeForm, SilkeFormProps } from '../silke-form';
import TextFieldContext from '../silke-text-field/text-field-context';
import { SilkeSchemaContext } from './silke-schema-context';
import { SilkeSchemaFields } from './silke-schema-fields';
import { SilkeTextFieldOutlineProps } from '../silke-text-field/silke-text-field-outline';

type SilkeFormSchemaProps<T extends { [key: string]: any }> = {
  schema: Schema;
  context: SchemaContextModel;
  leftLabel?: boolean;
  inline?: SilkeTextFieldOutlineProps['inline'];
  noPad?: boolean;
  readonly?: boolean;
  disabled?: boolean;
  variables?: LocalVariable[];
} & SilkeFormProps<T>;

//   pages?: { title: string; key: string; path?: string }[];
// currentPage  { title: string; key: string; path?: string };

export function SilkeFormSchema<T extends { [key: string]: any }>({
  schema,
  value,
  context,
  inline = false,
  ...rest
}: SilkeFormSchemaProps<T>) {
  return (
    <SilkeSchemaContext context={context}>
      <SilkeForm {...rest} value={value}>
        <TextFieldContext size="s" kind="default" inline={inline}>
          <SilkeSchemaFields schema={schema} value={value} {...rest} />
        </TextFieldContext>
      </SilkeForm>
    </SilkeSchemaContext>
  );
}