import { useFormik } from 'formik'
import { Button } from 'primereact/button'
import { Dialog } from 'primereact/dialog'
import { InputText } from 'primereact/inputtext'

export default function FormVerifikasi({ dialogForm, setDialogForm, dataEdit }) {
	const formik = useFormik({
		initialValues: {
			ref_id: dataEdit.ref_id || '',
			nama: dataEdit.nama || '',
		},
		validate: (data) => {
			let errors = {}
			if (!data.nama) errors.nama = 'Nama is required.'
			return errors
		},
		onSubmit: (data) => {
			console.log(data)
		},
	})

	const isFieldValid = (field) => !!(formik.touched[field] && formik.errors[field])
	const errorFieldMessage = (field) => {
		return (
			isFieldValid(field) && (
				<small className='p-error' style={{ fontSize: '11px' }}>
					{formik.errors[field]}
				</small>
			)
		)
	}

	const dialogFooter = (
		<div className='flex justify-end'>
			<Button
				type='submit'
				label='Cancel'
				className='p-button-sm p-button-secondary'
				onClick={() => {
					formik.resetForm()
					setDialogForm(false)
				}}
			/>
			<Button type='submit' label='Save' className='p-button-sm p-button-primary' onClick={formik.handleSubmit} />
		</div>
	)

	return (
		<>
			<Dialog
				header={formik.values.ref_id ? 'Update Verifikasi' : 'Add Verifikasi'}
				className='p-dialog-form'
				visible={dialogForm}
				draggable={false}
				resizable={false}
				position={'center'}
				closable={false}
				style={{ width: '30vw' }}
				footer={dialogFooter}
			>
				<form onSubmit={formik.handleSubmit}>
					<div className='p-fluid grid'>
						<div className='field col-12 md:col-12 mb-0'>
							<label className='block'>Nama</label>
							<InputText
								className='p-inputtext-sm'
								name='nama'
								value={formik.values.nama}
								onChange={formik.handleChange}
								placeholder='Masukkan nama jenis tagihan'
							/>
							{errorFieldMessage('nama')}
						</div>
					</div>
				</form>
			</Dialog>
		</>
	)
}