import { CSSProperties, ReactNode, FormEventHandler } from 'react'
import classNames from 'classnames'
import { CommonComponentProps } from '../../utils/types'
import './Form.scss'

import { FormItem } from './FormItem'

export * from './FormItem'

export interface FormProps extends CommonComponentProps {
  className?: string
  style?: CSSProperties
  children?: ReactNode
  onSubmit?: (event: SubmitEvent) => void
}

export function Form(props: FormProps) {
  const { className, style, children, onSubmit, ...restProps } = props

  const handleSubmit: FormEventHandler<HTMLFormElement> = (event: any) => {
    event.preventDefault()
    onSubmit?.(event)
  }

  const formClass = classNames('s-form')

  return (
    <form {...restProps} className={formClass} onSubmit={handleSubmit}>
      {children}
    </form>
  )
}

Form.Item = FormItem

export default Form