import { CardFilterLaporan } from '@/components/CardCustom'
import { DatatablePrime } from '@/components/Datatables'
import { Belakang } from '@/components/Layouts'
import { Judul } from '@/components/TextCustom'
import { Laporan32 } from '@/services/laporan/laporan-service'
import { Formik } from 'formik'
import moment from 'moment'
import Head from 'next/head'
import { Button } from 'primereact/button'
import { Calendar } from 'primereact/calendar'
import { Column } from 'primereact/column'
import { useEffect, useState } from 'react'

export default function RekapPerUnitKerja() {
	const [data, setData] = useState([])
	const [draw, setDraw] = useState(1)
	const [refresh, setRefresh] = useState(0)
	const [periodeFrom, setPeriodeFrom] = useState('')
	const [periodeTo, setPeriodeTo] = useState('')

	const headers = ['Unit', 'Jumlah Dokumen', 'Disetujui Tanpa Catatan', 'Disetujui Dengan Catatan', 'Tidak Disetujui']

	useEffect(() => {
		let params = {
			from: periodeFrom,
			to: periodeTo,
		}

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

	const dynamicColumns = headers.map((col, i) => {
		return <Column key={i} field={[i]} header={col} />
	})

	return (
		<>
			<Head>
				<title>Laporan Rekapitulasi per Unit Kerja</title>
			</Head>
			<Belakang>
				<Judul>Laporan Rekapitulasi per Unit Kerja</Judul>
				<CardFilterLaporan header={'Filter'}>
					<Formik
						initialValues={{ user_id: '', from: undefined, to: undefined }}
						onSubmit={(values, { setSubmitting }) => {
							let periodeFromBefore = values.from
							let periodeToBefore = values.to
							Object.assign(values, { from: moment(values.from).format('YYYY-MM') })
							Object.assign(values, { to: moment(values.to).format('YYYY-MM') })
							setPeriodeFrom(values.from)
							setPeriodeTo(values.to)

							values.from = periodeFromBefore
							values.to = periodeToBefore
							setRefresh(Math.random())
							setSubmitting(false)
						}}
						validateOnChange={false}
					>
						{({ values, handleChange, handleSubmit, isSubmitting }) => {
							return (
								<form onSubmit={handleSubmit} className='flex gap-x-5 items-center'>
									<div className='flex flex-col'>
										<label htmlFor='from'>Periode From</label>
										<Calendar
											name='from'
											value={values.from}
											onChange={handleChange}
											view='month'
											dateFormat='MM yy'
											placeholder='Select a Periode From'
										/>
									</div>
									<p>S/D</p>
									<div className='flex flex-col'>
										<label htmlFor='periode'>Periode To</label>
										<Calendar
											name='to'
											value={values.to}
											onChange={handleChange}
											view='month'
											dateFormat='MM yy'
											placeholder='Select a Periode To'
										/>
									</div>
									<div className='flex items-end mb-1'>
										<Button type='submit' label='Tampilkan' className='p-button-sm' loading={isSubmitting} />
									</div>
								</form>
							)
						}}
					</Formik>
				</CardFilterLaporan>

				<DatatablePrime data={data} draw={draw} setDraw={setDraw} buttonAddCustom={false} showHeader={false}>
					{dynamicColumns}
				</DatatablePrime>
			</Belakang>
		</>
	)
}
