import { UserList } from '@/services/manajemen/user-service'
import { UnitKerjaList } from '@/services/referensi/unitKerja-service'
import { VerifikatorCreate } from '@/services/referensi/verifikator-service'
import { useFormik } from 'formik'
import { Button } from 'primereact/button'
import { Dialog } from 'primereact/dialog'
import { Dropdown } from 'primereact/dropdown'
import { MultiSelect } from 'primereact/multiselect'
import { useEffect, useState } from 'react'

export default function FormVerifikator({ dialogForm, setDialogForm, dataEdit, setDataEdit, refresh, toast }) {
	const [ddVerifikator, setDdVerifikator] = useState([])
	const [ddUserList, setDdUserList] = useState([])

	useEffect(() => {
		UnitKerjaList({ draw: 0 }).then((res) => {
			setDdVerifikator(res.data)
		})
		UserList({ draw: 0 }).then((res) => {
			setDdUserList(res.data)
		})
	}, [])

	const formik = useFormik({
		initialValues: {
			unit_id: '',
			user_id: dataEdit.user_id || '',
		},
		validate: (data) => {
			let errors = {}
			if (!data.unit_id) errors.unit_id = 'Kode Unit is required.'
			if (!data.user_id) errors.user_id = 'Nama is required.'
			return errors
		},
		onSubmit: (data) => {
			VerifikatorCreate(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.ref_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'>Nama Verifikator</label>
							<Dropdown
								name='user_id'
								optionLabel='nama'
								optionValue='user_id'
								value={formik.values.user_id}
								options={ddUserList}
								onChange={formik.handleChange}
								placeholder='Select nama verifikator'
							/>
							{errorFieldMessage('nama')}
						</div>
						<div className='field col-12 md:col-12'>
							<label className='block'>Unit</label>
							<MultiSelect
								name='unit_id'
								optionLabel='nama'
								optionValue='unit_id'
								value={formik.values.unit_id}
								options={ddVerifikator}
								onChange={formik.handleChange}
								placeholder='Select unit'
							/>
							{errorFieldMessage('unit_id')}
						</div>
					</div>
				</form>
			</Dialog>
		</>
	)
}