import React from 'react'
import { createRoot } from 'react-dom/client'
import type { JsFieldProps, JsFieldRenderer } from '@filament/forms/js-field'

function {{ componentIdentifier }}(props: JsFieldProps<string | null>) {
    return (
        <input
            id={props.id}
            type="text"
            value={props.value ?? ''}
            disabled={props.isDisabled}
            readOnly={props.isReadOnly}
            required={props.isRequired}
            aria-invalid={props.isInvalid}
            aria-describedby={props.ariaDescribedBy}
            onChange={(event) => props.onChange(event.target.value)}
            onBlur={props.onBlur}
        />
    )
}

const mount{{ componentName }}: JsFieldRenderer<string | null> = ({ host, props: initialProps }) => {
    const root = createRoot(host)
    const update = (props: JsFieldProps<string | null>) => root.render(<{{ componentIdentifier }} {...props} />)

    update(initialProps)

    return { update, destroy: () => root.unmount() }
}

export default mount{{ componentName }}