import { DatatablePrime } from '@/components/Datatables'
import { DialogDelete } from '@/components/Dialog'
import FormVerifikator from '@/components/Form/Verifikator'
import { Belakang } from '@/components/Layouts'
import { Judul } from '@/components/TextCustom'
import { VerifikatorDelete, VerifikatorGetOne, VerifikatorList } from '@/services/referensi/verifikator-service'
import Head from 'next/head'
import { Button } from 'primereact/button'
import { Column } from 'primereact/column'
import { Toast } from 'primereact/toast'
import { useEffect, useRef, useState } from 'react'

export default function Verifikator() {
	const toast = useRef(null)
	const [data, setData] = useState([])
	const [dialogForm, setDialogForm] = useState(false)
	const [dataEdit, setDataEdit] = useState([])
	const [refresh, setRefresh] = useState(0)
	const [search, setSearch] = useState('')
	const [dialogDelete, setDialogDelete] = useState({})

	useEffect(() => {
		let params = {}

		if (search !== null && search !== '') {
			params.search = search
		} else {
			params.search = ''
		}

		VerifikatorList(params)
			.then((res) => {
				if (res.status === 'success') {
					setData(res.data)
				} else {
					console.log('Verifikator list error', res)
				}
			})
			.catch((err) => console.log(err))
	}, [search, refresh])

	const editVerifikator = (data) => {
		VerifikatorGetOne({ user_id: data.user_id }).then((res) => {
			if (res.status === 'success') {
				setDataEdit(res.data)
				setDialogForm(true)
			} else {
				console.log(res.message)
			}
		})
	}

	const deleteVerifikator = () => {
		VerifikatorDelete({ user_id: dialogDelete.user_id }).then((res) => {
			if (res.status === 'success') {
				setRefresh(Math.random)
				setDialogDelete({ visible: false })
				toast.current.show({
					severity: 'success',
					detail: res.message,
					closable: false,
				})
			} else {
				setDialogDelete({ visible: false })
				toast.current.show({
					severity: 'error',
					detail: res.message,
					closable: false,
				})
			}
		})
	}

	const actionBodyTemplate = (rowData) => {
		return (
			<div className='flex gap-x-2'>
				<Button icon='pi pi-pencil' className='p-button-sm p-button-rounded' onClick={() => editVerifikator(rowData)} />
				<Button
					icon='pi pi-trash'
					className='p-button-sm p-button-rounded p-button-danger'
					onClick={() => setDialogDelete({ user_id: rowData.user_id, visible: true })}
				/>
			</div>
		)
	}

	return (
		<>
			<Toast ref={toast} />
			<Head>
				<title>Verifikator</title>
			</Head>
			<Belakang>
				<Judul>Verifikator</Judul>
				<DatatablePrime
					data={data}
					setSearch={setSearch}
					dialogForm={dialogForm}
					setDialogForm={setDialogForm}
					Form={FormVerifikator}
					buttonAdd={true}
					buttonAddLabel='Tambah data'
					dataEdit={dataEdit}
					setDataEdit={setDataEdit}
					toast={toast}
					refresh={setRefresh}
				>
					<Column field='nama' header='Nama' sortable></Column>
					<Column field='unit' header='Unit Kerja' sortable></Column>
					<Column field='bobot' header='Bobot' sortable></Column>
					<Column header='Action' body={actionBodyTemplate} exportable={false}></Column>
				</DatatablePrime>
			</Belakang>

			{dialogDelete.visible === true && (
				<DialogDelete data={dialogDelete} setDelete={setDialogDelete} onCallback={deleteVerifikator} />
			)}
		</>
	)
}
