import axios from 'axios'
import moment from 'moment'
import { Button } from 'primereact/button'
import { Dialog } from 'primereact/dialog'
import { TabPanel, TabView } from 'primereact/tabview'
import { useEffect, useState } from 'react'

export const DialogDelete = ({ data, setDelete, onCallback }) => {
	const modelFooter = (
		<div className='flex justify-end'>
			<Button
				type='submit'
				label='Cancel'
				className='p-button-sm p-button-secondary'
				onClick={() => setDelete({ visible: false })}
			/>
			<Button type='submit' label='Delete' className='p-button-sm p-button-primary' onClick={onCallback} />
		</div>
	)

	return (
		<>
			<Dialog
				header='Delete Data'
				className='p-dialog-delete'
				visible={data.visible}
				draggable={false}
				resizable={false}
				position={'center'}
				closable={false}
				style={{ width: '25vw' }}
				footer={modelFooter}
			>
				<p>Are you sure you want to delete this data?</p>
			</Dialog>
		</>
	)
}

export const DialogDashboard = ({ data, displayDialog, setDisplayDialog }) => {
	const [dataFilter, setDataFilter] = useState([{ NO_SP2D: '-', TGL_SPM: '', NO_SPM: '-', TGL_SP2D: '' }])

	// NOMER SPP
	useEffect(() => {
		axios({
			method: 'get',
			url: process.env.NEXT_PUBLIC_API_SAKTI_REALISASI,
			headers: {
				Authorization: `Bearer ` + process.env.NEXT_PUBLIC_TOKEN_SAKTI,
			},
		})
			.then(function (response) {
				let dataFilter = response.data.filter((dataResponse) => dataResponse.NO_SPP === data.no_spp)
				if (dataFilter.length > 0) {
					setDataFilter(dataFilter)
				}
			})
			.catch(function (error) {
				console.log(error)
			})
	}, [data.no_spp])

	return (
		<Dialog
			header='Histori Pengajuan'
			visible={displayDialog}
			onHide={() => setDisplayDialog(false)}
			headerClassName='header-history'
			className='dialog-history 2xl:w-[90vw] lg:w-[80vw]'
			draggable={false}
		>
			<div className='grid grid-cols-2 gap-x-3 border-b-2 pb-7 mb-3'>
				<table className='h-fit border rounded'>
					<tbody>
						<tr className=''>
							<td className='border-b px-3 py-2 w-44 font-semibold'>Unit PPK</td>
							<td className='border-b px-3 py-2 w-1'>:</td>
							<td className='border-b px-3 py-2'>{data.nama_unit}</td>
						</tr>
						<tr>
							<td className='border-b px-3 py-2 font-semibold'>No SPP</td>
							<td className='border-b px-3 py-2 w-1'>:</td>
							<td className='border-b px-3 py-2'>{data.no_spp}</td>
						</tr>
						<tr>
							<td className='border-b px-3 py-2 font-semibold'>Kategori</td>
							<td className='border-b px-3 py-2 w-1'>:</td>
							<td className='border-b px-3 py-2'>{data.nama_tagihan}</td>
						</tr>
						<tr>
							<td className='border-b px-3 py-2 font-semibold'>No SP2D</td>
							<td className='border-b px-3 py-2 w-1'>:</td>
							<td className='border-b px-3 py-2'>{dataFilter[0].NO_SP2D}</td>
						</tr>
						<tr>
							<td className='border-b px-3 py-2 font-semibold'>Tanggal SP2D</td>
							<td className='border-b px-3 py-2 w-1'>:</td>
							<td className='border-b px-3 py-2'>
								{dataFilter[0].TGL_SP2D ? moment(dataFilter[0].TGL_SP2D).format('DD MMMM YYYY') : '-'}
							</td>
						</tr>
						<tr>
							<td className='border-b px-3 py-2 font-semibold'>No SPM</td>
							<td className='border-b px-3 py-2 w-1'>:</td>
							<td className='border-b px-3 py-2'>{dataFilter[0].NO_SPM}</td>
						</tr>
						<tr>
							<td className='border-b px-3 py-2 font-semibold'>Tanggal SPM</td>
							<td className='border-b px-3 py-2 w-1'>:</td>
							<td className='border-b px-3 py-2'>
								{dataFilter[0].TGL_SPM ? moment(dataFilter[0].TGL_SPM).format('DD MMMM YYYY') : '-'}
							</td>
						</tr>
					</tbody>
				</table>

				<div className='block h-72 overflow-y-scroll'>
					<table style={{ width: '100%' }}>
						<thead className='bg-green-200'>
							<tr>
								<th className='border px-3 py-2 font-semibold'>#</th>
								<th className='border px-3 py-2 font-semibold'>Tanggal</th>
								<th className='border px-3 py-2 font-semibold'>Keterangan</th>
							</tr>
						</thead>
						<tbody>
							{data.history.map((value, index) => {
								return (
									<tr key={index}>
										<td className='border px-3 py-2'>{index + 1}</td>
										<td className='border px-3 py-2'>{moment(value.tanggal).format('DD MMM YYYY - HH:mm')}</td>
										<td className={`border px-3 py-2 ${value.status === 'Berkas dikembalikan' && 'text-red-500'}`}>
											{value.status}
										</td>
									</tr>
								)
							})}
						</tbody>
					</table>
				</div>
			</div>

			<p className='text-xl font-semibold mb-1'>Catatan</p>
			<TabView>
				{data.details.map((value, index) => {
					return (
						<TabPanel header={`Tagihan ${index + 1}`} key={index}>
							<table className='w-full mb-7'>
								<thead className='bg-red-200'>
									<tr>
										<th className='border px-3 py-2 font-semibold lg:text-sm'>No Tagihan</th>
										<th className='border px-3 py-2 font-semibold lg:text-sm'>Akun</th>
										<th className='border px-3 py-2 font-semibold lg:text-sm'>Untuk Keperluan</th>
										<th className='border px-3 py-2 font-semibold lg:text-sm'>Status Tagihan</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td className='border px-3 py-2 lg:text-sm'>{value.nomor_tagihan}</td>
										<td className='border px-3 py-2 lg:text-sm'>{value.akun_name}</td>
										<td className='border px-3 py-2 lg:text-sm'>{value.keperluan}</td>
										<td className='border px-3 py-2 lg:text-sm'>-</td>
									</tr>
								</tbody>
							</table>

							<TabView>
								{value.syarat.map((valueSyarat, indexSyarat) => {
									return (
										<TabPanel header={valueSyarat.nama} key={indexSyarat}>
											<table className='w-full'>
												<thead className='bg-blue-200'>
													<tr>
														<th className='border px-3 py-2 font-semibold lg:text-sm'>Catatan Verif</th>
														<th className='border px-3 py-2 font-semibold lg:text-sm'>Catatan Bendahara</th>
														<th className='border px-3 py-2 font-semibold lg:text-sm'>Catatan SPM</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td className='border px-3 py-2 lg:text-sm'>{valueSyarat.verif_note}</td>
														<td className='border px-3 py-2 lg:text-sm'>{valueSyarat.bendahara_note}</td>
														<td className='border px-3 py-2 lg:text-sm'>{valueSyarat.spm_note}</td>
													</tr>
												</tbody>
											</table>
										</TabPanel>
									)
								})}
							</TabView>
						</TabPanel>
					)
				})}
			</TabView>
		</Dialog>
	)
}