import {mergeConfig} from '../../configStore'
import {object, string} from '../types'
import {checkbox} from './checkbox'
import type {FormField, FieldReturn, ObjectField} from '../../types'

export const formField = (props: FormField, mergeProps?: Partial<FormField>): FieldReturn => {
  const defaultProps: ObjectField = {
    fields: [
      string({name: 'label', required: true}),
      checkbox({
        name: 'required',
        title: 'Required Field',
      }),
    ],
    preview: {
      select: {
        label: 'label',
      },
      prepare: ({label = ''}) => ({
        title: label,
        media: props?.icon,
      }),
    },
  }

  return object(mergeConfig('formField', props, mergeProps, defaultProps))
}