import { CardFilterLaporan } from '@/components/CardCustom'
import { DatatablePrime } from '@/components/Datatables'
import { Belakang } from '@/components/Layouts'
import { Judul } from '@/components/TextCustom'
import { DDUserVerifKasub, Laporan11 } 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 PerUser() {
	const [data, setData] = useState([])
	const [draw, setDraw] = useState(1)
	const [periode, setPeriode] = useState('')
	const [optionVerifKasub, setOptionVerifKasub] = useState([])
	const [userID, setUserID] = useState('')
	const [refresh, setRefresh] = useState(0)
	const [namaUser, setNamaUser] = useState('')

	useEffect(() => {
		let params = {
			periode: periode,
			user_id: userID,
		}

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

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

	return (
		<>
			<Head>
				<title>Laporan Per User</title>
			</Head>
			<Belakang>
				<Judul>Laporan Per User</Judul>
				<CardFilterLaporan header={'Filter'}>
					<Formik
						initialValues={{ user_id: '', periode: undefined }}
						onSubmit={(values, { setSubmitting }) => {
							let periodeBefore = values.periode
							Object.assign(values, { periode: moment(values.periode).format('YYYY-MM') })
							setPeriode(values.periode)
							setUserID(values.user_id)
							UserGetOne({ user_id: values.user_id }).then((res) => {
								setNamaUser(res.data.nama)
							})

							values.periode = periodeBefore
							setRefresh(Math.random())
							setSubmitting(false)
						}}
						validateOnChange={false}
					>
						{({ values, handleChange, handleSubmit, isSubmitting }) => {
							return (
								<form onSubmit={handleSubmit} className='flex gap-x-5'>
									<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='periode'>Periode</label>
										<Calendar
											name='periode'
											value={values.periode}
											onChange={handleChange}
											view='month'
											dateFormat='MM yy'
											placeholder='Select a Periode'
										/>
									</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>{periode && moment(periode).format('MMMM YYYY')}</td>
							</tr>
						</tbody>
					</table>
				</div>

				<DatatablePrime data={data} draw={draw} setDraw={setDraw} buttonAddCustom={false}>
					<Column field='no_tagihan' header='Nomor Tagihan' sortable></Column>
					<Column field='nama_unit' header='Unit' sortable></Column>
					<Column field='tanggal_proses' header='Tanggal Proses' sortable></Column>
				</DatatablePrime>
			</Belakang>
		</>
	)
}
