/* eslint-disable no-mixed-spaces-and-tabs */
import { CardCustom } from '@/components/CardCustom'
import { Belakang } from '@/components/Layouts'
import { Judul, SubJudul } from '@/components/TextCustom'
import { ddRekomendasi } from '@/constant/globalData'
import { TagihanGet, VerifikasiSave } from '@/services/otorisasi/verifikasi-service'
import { Formik } from 'formik'
import 'moment/locale/id'
import Head from 'next/head'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { Accordion, AccordionTab } from 'primereact/accordion'
import { BreadCrumb } from 'primereact/breadcrumb'
import { Button } from 'primereact/button'
import { Card } from 'primereact/card'
import { Dropdown } from 'primereact/dropdown'
import { InputText } from 'primereact/inputtext'
import { InputTextarea } from 'primereact/inputtextarea'
import { RadioButton } from 'primereact/radiobutton'
import { TabPanel, TabView } from 'primereact/tabview'
import { Toast } from 'primereact/toast'
import React, { useEffect, useRef, useState } from 'react'
import Swal from 'sweetalert2'

export default function FormPersetujuan() {
	const router = useRouter()
	const { tagihan_id } = router.query
	const [dataTagihan, setDataTagihan] = useState([])
	const [dataDetail, setDataDetail] = useState([])

	useEffect(() => {
		tagihan_id &&
			TagihanGet({ ref_id: tagihan_id })
				.then((res) => {
					setDataTagihan(res.data[0])
					setDataDetail(res.data[1])
				})
				.catch((err) => console.log(err))
	}, [tagihan_id])

	const toast = useRef(null)
	const [activeIndex, setActiveIndex] = useState(0)

	/**
	 * *Breadcrumb
	 */
	const items = [{ label: 'Persetujuan', url: '/otorisasi/persetujuan' }, { label: 'Form' }]
	const home = { icon: 'pi pi-home', url: '/dashboard' }

	const formikInitialValues = () => {
		const detail =
			dataDetail.length > 0 &&
			dataDetail.map((value) => {
				let cekTMS = []
				value.syarat.map((valueTMS) => {
					cekTMS.push(valueTMS.ms)
				})
				let cekTMSH = cekTMS.find((isi_tms) => isi_tms === 'tms')
				return {
					detail_id: value.detail_id,
					jenis_belanja: value.jenis_belanja,
					jenis_kegiatan: value.jenis_kegiatan,
					akun: value.akun_id,
					keperluan_untuk: value.keperluan,
					rekom_kabag: cekTMSH === 'tms' ? 'Ditolak/dikembalikan' : '',
					syarat: value.syarat.map((valueSyarat) => {
						return {
							syarat_id: valueSyarat.syarat_id,
							nama_persyaratan: valueSyarat.syarat_dokumen,
							catatans: {
								verif: valueSyarat.verif_note,
								bendahara: valueSyarat.bendahara_note,
								spm: valueSyarat.spm_note,
							},
							ms: valueSyarat.ms,
						}
					}),
				}
			})
		return { details: detail, persetujuan: false, tagihan_id: tagihan_id }
	}

	return (
		<>
			<Toast ref={toast} />
			<Head>
				<title>Form Persetujuan</title>
			</Head>
			<Belakang>
				<BreadCrumb model={items} home={home} />
				<div className='mb-5'></div>
				<Judul>Form Persetujuan</Judul>
				<Card>
					<div className='grid grid-cols-2 gap-3'>
						<CardCustom header={'No SPP'} content={dataTagihan && dataTagihan.no_spp} />
						<CardCustom header={'Unit PPK'} content={dataTagihan && dataTagihan.unit} />
						<CardCustom header={'Jenis Tagihan'} content={dataTagihan && dataTagihan.tagihan} />
					</div>
				</Card>
				{dataDetail.length > 0 && (
					<Formik
						initialValues={formikInitialValues()}
						onSubmit={async (values, { setSubmitting }) => {
							VerifikasiSave(values)
								.then((res) => {
									if (res.status == 'ok') {
										Swal.fire({
											title: 'Success',
											text: 'Verifikasi berhasil',
											icon: 'success',
											timer: 2000,
											timerProgressBar: true,
										}).then(() => {
											router.push('/otorisasi/persetujuan')
										})
									}
									setSubmitting(false)
								})
								.catch((err) => {
									setSubmitting(false)
									console.log(err)
								})
						}}
						validate={(data) => {
							let errors = {}
							data.details.map((values, indexTagihan) => {
								const indexTagihanx = indexTagihan + 1
								if (!values.rekom_kabag) {
									errors.rekom = 'required'
									toast.current.show({
										severity: 'error',
										summary: 'Error Message',
										detail: 'Rekomendasi Tagihan ' + indexTagihanx + ' Tidak Boleh Kosong',
									})
								}
								values.syarat.map((valuesSyarats, indexSyarat) => {
									const indexSyaratx = indexSyarat + 1
									if (!valuesSyarats.ms) {
										errors.ms = 'required'
										toast.current.show({
											severity: 'error',
											summary: 'Error Message',
											detail: 'Tagihan ' + indexTagihanx + ' Syarat ke ' + indexSyaratx + ' MS/TMS Tidak Boleh Kosong',
										})
									} else if (valuesSyarats.ms === 'tms') {
										if (!valuesSyarats.catatans.verif) {
											errors.keterangan = 'required'
											toast.current.show({
												severity: 'error',
												summary: 'Error Message',
												detail:
													'Tagihan ' + indexTagihanx + ' Syarat ke ' + indexSyaratx + ' Catatan Tidak Boleh Kosong',
											})
										}
									}
								})
							})

							return errors
						}}
						validateOnChange={false}
					>
						{({ values, handleChange, handleSubmit, setFieldValue, isSubmitting }) => {
							const handleKirim = () => {
								setFieldValue('persetujuan', true)
								handleSubmit()
							}

							const handleTolak = () => {
								setFieldValue('persetujuan', false)
								handleSubmit()
							}
							let cekTMSTolak = []
							values.details.map((valRekomKabag) => {
								cekTMSTolak.push(valRekomKabag.rekom_kabag)
							})
							let cekTMSTolakH = cekTMSTolak.find((isi_tms) => isi_tms === 'Ditolak/dikembalikan')

							return (
								<React.Fragment>
									<Accordion
										activeIndex={activeIndex}
										onTabChange={(e) => setActiveIndex(e.index)}
										className='mt-3 shadow'
									>
										{dataDetail.map((dataTagihan, indexTagihan) => {
											let cekTMS = []
											values.details[indexTagihan].syarat.map((valueTMS) => {
												cekTMS.push(valueTMS.ms)
											})
											let cekTMSH = cekTMS.find((isi_tms) => isi_tms === 'tms')

											return (
												<AccordionTab header={`Tagihan ${indexTagihan + 1}`} key={indexTagihan}>
													<div className='grid grid-cols-2 gap-3'>
														<CardCustom header={'Jenis Belanja'} content={dataTagihan.jenis_belanja} type='cream' />
														<CardCustom header={'Jenis Kegiatan'} content={dataTagihan.jenis_kegiatan} type='cream' />
														<CardCustom header={'Akun'} content={dataTagihan.akun_id} type='cream' />
														<CardCustom header={'Keperluan Untuk'} content={dataTagihan.keperluan} type='cream' />
														<div className='border text-center'>
															<p className='font-semibold py-1 bg-green-100'>File</p>
															<div className='flex items-center justify-center h-[40px]'>
																<Link href={process.env.NEXT_PUBLIC_API_FILE + dataTagihan.filepath}>
																	<a target={'_blank'} className='flex items-center justify-center gap-x-1'>
																		<i className='pi pi-file-pdf' style={{ fontSize: '2em' }} />
																		<p className='text-sm hover:underline'>Klik disini untuk lihat file</p>
																	</a>
																</Link>
															</div>
														</div>
													</div>
													<div className='my-3'>
														<SubJudul className='text-lg mb-1'>Syarat</SubJudul>
														<div className='flex border rounded py-1 px-3 text-xs gap-5 w-fit mb-1'>
															<div className='flex gap-3 items-center'>
																<span className='bg-logo-pink1 w-10 h-3 rounded'></span>
																<p>Syarat dengan status TMS (Tidak memenuhi syarat)</p>
															</div>
															<div className='flex gap-3 items-center'>
																<span className='bg-logo-kuning1 w-10 h-3 rounded'></span>
																<p>Syarat dengan catatan</p>
															</div>
														</div>
														<Accordion className='accordion-syarat'>
															{dataTagihan.syarat.map((valueSyarat, indexSyarat) => {
																return (
																	<AccordionTab
																		header={valueSyarat.syarat_dokumen}
																		key={indexSyarat}
																		headerClassName={`${
																			values.details[indexTagihan].syarat[indexSyarat].ms === 'tms'
																				? 'p-accordion-syarat-tms'
																				: values.details[indexTagihan].syarat[indexSyarat].catatans.verif
																				? 'p-accordion-syarat-catatan'
																				: ''
																		}`}
																	>
																		<div className='mx-32'>
																			<table className='custom-table'>
																				<thead>
																					<tr>
																						<th>MS</th>
																						<th>TMS</th>
																					</tr>
																				</thead>
																				<tbody>
																					<tr>
																						<td width={'10%'}>
																							<div className='flex flex-col justify-center items-center'>
																								<RadioButton
																									name={`details.${indexTagihan}.syarat.${indexSyarat}.ms`}
																									value='ms'
																									onChange={(e) => {
																										handleChange(e)
																										setFieldValue(`details.${indexTagihan}.rekom_kabag`, null)
																									}}
																									checked={values.details[indexTagihan].syarat[indexSyarat].ms === 'ms'}
																								/>
																							</div>
																						</td>
																						<td className='text-center' width={'10%'}>
																							<RadioButton
																								name={`details.${indexTagihan}.syarat.${indexSyarat}.ms`}
																								value='tms'
																								onChange={(e) => {
																									handleChange(e)
																									setFieldValue(
																										`details.${indexTagihan}.rekom_kabag`,
																										'Ditolak/dikembalikan'
																									)
																								}}
																								checked={values.details[indexTagihan].syarat[indexSyarat].ms === 'tms'}
																							/>
																						</td>
																					</tr>
																					<tr className=''>
																						<td colSpan={4}>
																							<p className='text-xl font-semibold mb-1'>Catatan</p>
																							<TabView key={indexSyarat} activeIndex={0}>
																								<TabPanel header='Catatan Verifikator'>
																									<InputTextarea
																										name={`details.${indexTagihan}.syarat.${indexSyarat}.catatans.verif`}
																										rows={5}
																										cols={30}
																										value={
																											values.details[indexTagihan].syarat[indexSyarat].catatans.verif
																										}
																										onChange={handleChange}
																										className='w-full'
																										placeholder='Masukkan catatan Verifikator'
																									/>
																								</TabPanel>

																								<TabPanel header='Catatan Bendahara'>
																									<InputTextarea
																										name={`details.${indexTagihan}.syarat.${indexSyarat}.catatans.bendahara`}
																										rows={5}
																										cols={30}
																										value={
																											values.details[indexTagihan].syarat[indexSyarat].catatans
																												.bendahara
																										}
																										onChange={handleChange}
																										className='w-full'
																										placeholder='Masukkan catatan Bendahara'
																										readOnly
																									/>
																								</TabPanel>
																								<TabPanel header='Catatan SPM'>
																									<InputTextarea
																										name={`details.${indexTagihan}.syarat.${indexSyarat}.catatans.spm`}
																										rows={5}
																										cols={30}
																										value={
																											values.details[indexTagihan].syarat[indexSyarat].catatans.spm
																										}
																										onChange={handleChange}
																										className='w-full'
																										placeholder='Masukkan catatan SPM'
																										readOnly
																									/>
																								</TabPanel>
																							</TabView>
																						</td>
																					</tr>
																				</tbody>
																			</table>
																		</div>
																	</AccordionTab>
																)
															})}
														</Accordion>
													</div>
													<SubJudul className='text-lg mb-1'>Rekomendasi Verif</SubJudul>
													<InputText
														value={dataTagihan.rekomendasi_verifikator}
														className='w-72'
														readOnly
														style={{ marginBottom: '12px' }}
													/>
													<SubJudul className='text-lg mb-1'>Rekomendasi Kasub</SubJudul>
													<InputText
														value={dataTagihan.rekomendasi_kasub}
														className='w-72'
														readOnly
														style={{ marginBottom: '12px' }}
													/>
													<SubJudul className='text-lg mb-1'>Rekomendasi Kabag</SubJudul>
													<Dropdown
														name={`details.${indexTagihan}.rekom_kabag`}
														optionLabel='name'
														optionValue='name'
														value={
															cekTMSH === 'tms' ? 'Ditolak/dikembalikan' : values.details[indexTagihan].rekom_kabag
														}
														options={
															cekTMSH === 'tms'
																? ddRekomendasi.filter((val) => val.name === 'Ditolak/dikembalikan')
																: ddRekomendasi.filter((val) => val.name !== 'Ditolak/dikembalikan')
														}
														onChange={handleChange}
														placeholder='Pilih rekomendasi'
														className='w-80'
														showClear={
															values.details[indexTagihan].rekom_kabag
																? values.details[indexTagihan].rekom_kabag === 'Ditolak/dikembalikan'
																	? false
																	: true
																: false
														}
														readOnly={cekTMSH === 'tms' ? true : false}
													/>
												</AccordionTab>
											)
										})}
									</Accordion>
									<div className='mt-3 flex justify-center gap-x-3'>
										<Button
											type='button'
											label='Tolak'
											onClick={() => handleTolak()}
											className='p-button-sm p-button-danger'
											disabled={cekTMSTolakH === 'Ditolak/dikembalikan' ? false : true}
											loading={isSubmitting}
										/>
										<Button
											type='button'
											label='Kirim'
											onClick={() => handleKirim()}
											className='p-button-sm'
											disabled={cekTMSTolakH === 'Ditolak/dikembalikan' ? true : false}
											loading={isSubmitting}
										/>
									</div>
								</React.Fragment>
							)
						}}
					</Formik>
				)}
			</Belakang>
		</>
	)
}
