import { DatatablePrime } from '@/components/Datatables'
import { DialogDelete } from '@/components/Dialog'
import FormPersyaratan from '@/components/Form/Persyaratan'
import { Belakang } from '@/components/Layouts'
import { Judul } from '@/components/TextCustom'
import { PersyaratanDelete, PersyaratanGetOne, PersyaratanList } from '@/services/referensi/persyaratan-service'
import { Form, Formik } from 'formik'
import Head from 'next/head'
import { Button } from 'primereact/button'
import { Column } from 'primereact/column'
import { Dialog } from 'primereact/dialog'
import { Dropdown } from 'primereact/dropdown'
// import { Dropdown } from 'primereact/dropdown'
import { Toast } from 'primereact/toast'
import { useEffect, useRef, useState } from 'react'

export default function Persyaratan() {
	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({})
	const [dialogUpload, setDialogUpload] = useState(false)
	const [dataDrawPrev, setDataDrawPrev] = useState([])
	const [dataDrawNext, setDataDrawNext] = useState([])
	const [draw, setDraw] = useState(1)

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

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

		params.draw = draw
		PersyaratanList(params).then((res) => setData(res.data))

		if (draw > 1) {
			params.draw = draw > 1 ? draw - 1 : draw
			PersyaratanList(params).then((res) => setDataDrawPrev(res.data))
		}
		params.draw = draw + 1
		PersyaratanList(params).then((res) => setDataDrawNext(res.data))
	}, [search, refresh, draw])

	const editPersyaratan = (data) => {
		PersyaratanGetOne({ syarat_id: data.syarat_id }).then((res) => {
			if (res.status === 'ok') {
				setDataEdit(res.data)
				setDialogForm(true)
			} else {
				console.log(res.message)
			}
		})
	}

	const deletePersyaratan = () => {
		PersyaratanDelete({ syarat_id: dialogDelete.syarat_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={() => editPersyaratan(rowData)} />
				<Button
					icon='pi pi-trash'
					className='p-button-sm p-button-rounded p-button-danger'
					onClick={() => setDialogDelete({ syarat_id: rowData.syarat_id, visible: true })}
				/>
			</div>
		)
	}

	return (
		<>
			<Toast ref={toast} />
			<Head>
				<title>Persyaratan</title>
			</Head>
			<Belakang>
				<Judul>Persyaratan</Judul>
				<DatatablePrime
					data={data}
					dataDrawPrev={dataDrawPrev}
					dataDrawNext={dataDrawNext}
					draw={draw}
					setDraw={setDraw}
					setSearch={setSearch}
					dialogForm={dialogForm}
					setDialogForm={setDialogForm}
					Form={FormPersyaratan}
					buttonUpload={true}
					buttonUploadLabel='Upload syarat'
					buttonAdd={true}
					buttonAddLabel='Tambah data'
					dataEdit={dataEdit}
					setDataEdit={setDataEdit}
					toast={toast}
					refresh={setRefresh}
					dialogUpload={dialogUpload}
					setDialogUpload={setDialogUpload}
				>
					<Column field='nama_tagihan' header='Nama Tagihan' sortable></Column>
					<Column field='nama_belanja' header='Nama Belanja' sortable></Column>
					<Column field='nama_kegiatan' header='Nama Kegiatan' sortable></Column>
					<Column field='syarat_dokumen' header='Syarat Dokumen' sortable></Column>
					<Column field='keterangan' header='Keterangan' sortable></Column>
					<Column header='Action' body={actionBodyTemplate} exportable={false}></Column>
				</DatatablePrime>
			</Belakang>

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

			<Dialog
				header='Upload File Persyaratan'
				visible={dialogUpload}
				style={{ width: '50vw' }}
				onHide={() => setDialogUpload(false)}
			>
				<Formik
					initialValues={{
						truncate: false,
						jenis_tagihan: '',
						fileupload: '',
					}}
					onSubmit={(values) => {
						console.log(values)
					}}
				>
					{({ values, handleChange, setFieldValue }) => {
						const onBrowseFile = async (event) => {
							const files = event.target.files
							if (files) {
								if (files[0].type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
									setFieldValue('fileupload', files[0].name)
								} else {
									event.target.value = ''
									toast.current.show({
										severity: 'error',
										detail: 'Invalid format file',
										closable: false,
									})
								}
							}
						}
						return (
							<Form>
								<div className='p-fluid grid grid-cols-2 gap-2'>
									<div className=''>
										<label className='block'>File</label>
										{values.fileupload ? (
											<div className=''>
												<input
													id='files'
													type='file'
													onChange={(e) => onBrowseFile(e)}
													accept='.xlsx'
													style={{ display: 'none' }}
												/>
												<label htmlFor='files' className='bg-blue-300 p-2 rounded cursor-pointer'>
													<i className='pi pi-file-pdf' /> {values.fileupload}
												</label>
											</div>
										) : (
											<>
												<input id='files' type='file' onChange={(e) => onBrowseFile(e)} accept='.xlsx' />
											</>
										)}
									</div>
									<div className=''>
										<label className='block'>Truncate</label>
										<Dropdown
											name='truncate'
											optionLabel='name'
											optionValue='value'
											value={values.truncate}
											options={[
												{ name: 'Yes', value: true },
												{ name: 'No', value: false },
											]}
											onChange={handleChange}
											placeholder='Select a City'
										/>
									</div>
									<div className=''>
										<label className='block'>Jenis Tagihan</label>
										<Dropdown
											name='truncate'
											optionLabel='name'
											optionValue='value'
											value={values.truncate}
											options={[
												{ name: 'Yes', value: true },
												{ name: 'No', value: false },
											]}
											onChange={handleChange}
											placeholder='Select a City'
										/>
									</div>
								</div>
							</Form>
						)
					}}
				</Formik>
			</Dialog>
		</>
	)
}
