import { CardFilterLaporan } from '@/components/CardCustom'
import { DatatablePrime } from '@/components/Datatables'
import { Belakang } from '@/components/Layouts'
import { Judul } from '@/components/TextCustom'
import { DDUserVerifKasub, Laporan21 } from '@/services/laporan/laporan-service'
import { UserGetOne } from '@/services/manajemen/user-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 { Dropdown } from 'primereact/dropdown'
import { useEffect, useState } from 'react'

export default function RekapBulananPerUser() {
	const [data, setData] = useState([])
	const [headers, setHeaders] = useState([])
	const [draw, setDraw] = useState(1)
	const [optionVerifKasub, setOptionVerifKasub] = useState([])
	const [userID, setUserID] = useState('')
	const [refresh, setRefresh] = useState(0)
	const [periodeFrom, setPeriodeFrom] = useState('')
	const [periodeTo, setPeriodeTo] = useState('')
	const [namaUser, setNamaUser] = useState('')

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

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

	useEffect(() => {
		DDUserVerifKasub()
			.then((res) => setOptionVerifKasub(res.data))
			.catch((err) => console.log(err))
	}, [])

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

	return (
		<>
			<Head>
				<title>Laporan Rekapitulasi Bulanan per User</title>
			</Head>
			<Belakang>
				<Judul>Laporan Rekapitulasi Bulanan per User</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)
							setUserID(values.user_id)
							UserGetOne({ user_id: values.user_id }).then((res) => {
								setNamaUser(res.data.nama)
							})

							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='user_id'>Username</label>
										<Dropdown
											name='user_id'
											optionLabel='nama_user'
											optionValue='user_id'
											value={values.user_id}
											options={optionVerifKasub}
											onChange={handleChange}
											placeholder='Select a Username'
											className='w-52'
											filter
										/>
									</div>
									<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>
				<div className='border rounded p-3 mb-5 shadow'>
					<table cellPadding={3} width={'100%'}>
						<tbody>
							<tr style={{ borderBottom: '1px solid', borderColor: '#e5e7eb' }}>
								<td className='font-semibold' width={'10%'}>
									Nama
								</td>
								<td width={'1%'}>:</td>
								<td width={'89%'}>{namaUser}</td>
							</tr>
							<tr style={{ borderBottom: '1px solid', borderColor: '#e5e7eb' }}>
								<td className='font-semibold'>Unit</td>
								<td>:</td>
								<td>Biro Keuangan</td>
							</tr>
							<tr style={{ borderBottom: '1px solid', borderColor: '#e5e7eb' }}>
								<td className='font-semibold'>Bulan</td>
								<td>:</td>
								<td>{periodeFrom && moment(periodeFrom).format('MMMM YYYY')}</td>
							</tr>
						</tbody>
					</table>
				</div>

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