import { ObjectField as ObjectFieldType, SchemaFieldProps } from '@vev/utils';
import React from 'react';
import { SilkeBox } from '../../silke-box';
import { SilkeObjectField } from '../../silke-object-field';
import { SilkeTextSmall } from '../../silke-text';
import { SilkeSchemaFields } from '../silke-schema-fields';

import { getTitle } from './utils/schema-util';

export default function ObjectField({
  value = {},
  schema,
  disabled,
  readonly,
  onChange,
  itemIndex,
}: SchemaFieldProps<ObjectFieldType>) {
  return (
    <SilkeBox column flex style={{ paddingTop: '16px' }} gap="xs">
      <SilkeTextSmall weight="strong">{getTitle(schema)}</SilkeTextSmall>
      {schema.description && (
        <SilkeTextSmall color="neutral-80">{schema.description}</SilkeTextSmall>
      )}
      <SilkeObjectField value={value} onChange={onChange}>
        <SilkeSchemaFields
          disabled={disabled}
          readonly={readonly}
          schema={(schema as any).fields}
          value={value}
          key={schema.name}
          noPad
          itemIndex={itemIndex}
        />
      </SilkeObjectField>
    </SilkeBox>
  );
}