import { UnitKerjaCreate, UnitKerjaUpdate } from '@/services/referensi/unitKerja-service'
import { useFormik } from 'formik'
import { Button } from 'primereact/button'
import { Dialog } from 'primereact/dialog'
import { InputText } from 'primereact/inputtext'

export default function FormUnitKerja({ dialogForm, setDialogForm, dataEdit, setDataEdit, refresh, toast }) {
	const formik = useFormik({
		initialValues: {
			ref_id: dataEdit.ref_id || '',
			unit_id: dataEdit.unit_id || '',
			nama: dataEdit.nama || '',
			bobot: dataEdit.bobot || '',
		},
		validate: (data) => {
			let errors = {}
			if (!data.unit_id) errors.unit_id = 'Kode Unit is required.'
			if (!data.nama) errors.nama = 'Nama is required.'
			if (!data.bobot) errors.bobot = 'Bobot is required.'
			return errors
		},
		onSubmit: (data) => {
			if (data.ref_id) {
				UnitKerjaUpdate(data).then((res) => {
					if (res.status === 'success') {
						refresh(Math.random)
						formik.resetForm()
						setDataEdit([])
						setDialogForm(false)
						toast.current.show({
							severity: 'success',
							detail: res.message,
							closable: false,
						})
					} else {
						setDialogForm(false)
						toast.current.show({
							severity: 'error',
							detail: res.message,
							closable: false,
						})
					}
				})
			} else {
				UnitKerjaCreate(data).then((res) => {
					if (res.status === 'success') {
						refresh(Math.random)
						formik.resetForm()
						setDataEdit([])
						setDialogForm(false)
						toast.current.show({
							severity: 'success',
							detail: res.message,
							closable: false,
						})
					} else {
						setDialogForm(false)
						toast.current.show({
							severity: 'error',
							detail: res.message,
							closable: false,
						})
					}
				})
			}
		},
	})

	const isFieldValid = (field) => !!(formik.errors[field] && formik.touched[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.unit_id ? 'Update Jenis Tagihan' : 'Add Jenis Tagihan'}
				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 gap-y-3'>
						<div className='field col-12 md:col-12'>
							<label className='block'>Kode Unit</label>
							<InputText
								className='p-inputtext-sm'
								name='unit_id'
								value={formik.values.unit_id}
								onChange={formik.handleChange}
								placeholder='Masukkan Kode Unit'
							/>
							{errorFieldMessage('unit_id')}
						</div>
						<div className='field col-12 md:col-12'>
							<label className='block'>Nama</label>
							<InputText
								className='p-inputtext-sm'
								name='nama'
								value={formik.values.nama}
								onChange={formik.handleChange}
								placeholder='Masukkan nama unit kerja'
							/>
							{errorFieldMessage('nama')}
						</div>
						<div className='field col-12 md:col-12'>
							<label className='block'>Bobot</label>
							<InputText
								className='p-inputtext-sm'
								name='bobot'
								value={formik.values.bobot}
								onChange={formik.handleChange}
								placeholder='Masukkan bobot'
							/>
							{errorFieldMessage('bobot')}
						</div>
					</div>
				</form>
			</Dialog>
		</>
	)
}