import { DatatablePrimeV2 } from '@/components/Datatables-v2'
import { Label } from '@/components/Label'
import { Belakang } from '@/components/Layouts'
import { Judul } from '@/components/TextCustom'
import { TagihanDelete, TagihanList } from '@/services/pengajuan-tagihan/tagihan-service'
import { JenisTagihanList } from '@/services/referensi/jenisTagihan-service'
import { Formik } from 'formik'
import moment from 'moment'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { Button } from 'primereact/button'
import { Calendar } from 'primereact/calendar'
import { Card } from 'primereact/card'
import { Column } from 'primereact/column'
import { DataTable } from 'primereact/datatable'
import { Dropdown } from 'primereact/dropdown'
import { InputText } from 'primereact/inputtext'
import { Toast } from 'primereact/toast'
import React, { useEffect, useRef, useState } from 'react'

export default function PengajuanTagihan() {
	const toast = useRef(null)
	const [data, setData] = useState([])
	const [dialogDelete, setDialogDelete] = useState({ visible: false })
	const [expandedRows, setExpandedRows] = useState(null)
	const [ddJenisTagihan, setDdJenisTagihan] = useState([])
	const [search, setSearch] = useState({})
	const router = useRouter()
	const [loading, setLoading] = useState(false)
	const [refresh, setRefresh] = useState(0)

	// DATATABLE
	const [sort, setSort] = useState([])
	const [orderDir, setOrderDir] = useState('desc')
	const [orderCol, setOrderCol] = useState(2)
	const [first, setFirst] = useState(0)
	const [page, setPage] = useState(0)
	const [length, setLength] = useState(10)
	const [totalRecords, setTotalRecords] = useState(0)

	useEffect(() => {
		JenisTagihanList().then((res) => setDdJenisTagihan(res.data))
	}, [])

	useEffect(() => {
		setLoading(true)
		let params = {
			draw: page,
			start: first,
			length: length,
			order_col: orderCol,
			order_dir: orderDir,
		}

		const { no_spp, jenis_tagihan, tanggal_input } = search
		params.no_spp = no_spp ? no_spp : ''
		params.jenis_tagihan = jenis_tagihan ? jenis_tagihan : ''
		params.tanggal_input = tanggal_input ? moment(tanggal_input).format('YYYY-MM-DD') : ''

		TagihanList(params).then((res) => {
			setData(res.data)
			setLoading(false)
			setTotalRecords(
				res.recordsFiltered === 1 ? 1 : res.recordsFiltered < 1 ? res.recordsFiltered : res.recordsFiltered
			)
		})
	}, [page, first, length, orderCol, orderDir, refresh, search])

	const editTagihan = (data) => {
		if (data.tanggal_kirim === '-' && data.detail.length > 0) {
			router.push({ pathname: '/pengajuan-tagihan/draft/[draft]', query: { draft: data.tagihan_id } })
		} else if (data.tanggal_kirim === '-') {
			router.push({ pathname: '/pengajuan-tagihan/force-close/[force]', query: { force: data.tagihan_id } })
		} else {
			router.push({ pathname: '/pengajuan-tagihan/ditolak/[ditolak]', query: { ditolak: data.tagihan_id } })
		}
	}

	const deleteTagihan = () => {
		TagihanDelete({ ref_id: dialogDelete.ref_id }).then((res) => {
			if (res.status === 'success') {
				setRefresh(Math.random)
				setDialogDelete({ visible: false })
				toast.current.show({
					severity: 'success',
					detail: res.message,
					closable: false,
				})
			} else {
				setDialogDelete({ visible: false })
				toast.current.show({
					severity: 'error',
					detail: res.message,
					closable: false,
				})
			}
		})
	}

	const actionBodyTemplate = (rowData) => {
		return (
			<div className='flex gap-x-2'>
				<Button
					icon='pi pi-pencil'
					className='p-button-sm p-button-rounded'
					onClick={() => editTagihan(rowData)}
					disabled={rowData.tanggal_kirim === '-' || rowData.editable || rowData.penolakan ? false : true}
				/>
				<Button
					icon='pi pi-trash'
					className='p-button-sm p-button-rounded p-button-danger'
					onClick={() => setDialogDelete({ ref_id: rowData.tagihan_id, visible: true })}
					disabled={rowData.tanggal_kirim === '-' || rowData.editable ? false : true}
				/>
			</div>
		)
	}

	const bodyTanggal = (rowData) => {
		return rowData.tanggal_spp !== '-' ? (
			moment(rowData.tanggal_spp).format('DD MMMM YYYY')
		) : (
			<Label type={'warning'}>Belum dikirim</Label>
		)
	}

	const datatableDetail = (data) => {
		return (
			<DataTable value={data} className='mx-20'>
				<Column field='akun' header='Akun'></Column>
				<Column field='keperluan' header='Keperluan'></Column>
				<Column field='nomor_tagihan' header='Nomor Tagihan'></Column>
			</DataTable>
		)
	}

	const expandRow = {
		expandedRows: expandedRows,
		onRowToggle: (e) => setExpandedRows(e.data),
		responsiveLayout: 'scroll',
		rowExpansionTemplate: (e) => datatableDetail(e.detail),
		dataKey: 'no_spp',
	}

	const Pencarian = (
		<React.Fragment>
			<Formik
				initialValues={{ no_spp: '', jenis_tagihan: '', tanggal_input: '' }}
				onSubmit={(values) => {
					const tempTanggalInput = values.tanggal_input
					values.tanggal_input &&
						Object.assign(values, { tanggal_input: moment(values.tanggal_input).format('YYYY-MM-D') })
					setSearch(values)
					values.tanggal_input = tempTanggalInput
				}}
			>
				{({ values, handleChange, handleSubmit }) => {
					return (
						<form onSubmit={handleSubmit}>
							<div className='flex gap-x-5 items-center justify-center'>
								<div className='flex flex-col'>
									<label htmlFor='no_spp'>No SPP</label>
									<InputText
										id='no_spp'
										name='no_spp'
										value={values.no_spp}
										onChange={handleChange}
										placeholder='Masukkan Nomor SPP'
									/>
								</div>
								<div className='flex flex-col'>
									<label htmlFor='no_spp'>Jenis Tagihan</label>
									<Dropdown
										name='jenis_tagihan'
										value={values.jenis_tagihan}
										optionValue='jenis_id'
										optionLabel='nama'
										options={ddJenisTagihan}
										onChange={handleChange}
										placeholder='Select Jenis Tagihan'
										showClear={values.jenis_tagihan ? true : false}
										className='w-52'
									/>
								</div>
								<div className='flex flex-col'>
									<label htmlFor='no_spp'>Tanggal Input</label>
									<Calendar
										name='tanggal_input'
										value={values.tanggal_input}
										onChange={handleChange}
										placeholder='e.g. 17 Agustus 1945'
										dateFormat='dd MM yy'
										showButtonBar
									></Calendar>
								</div>
								<div className='flex flex-col'>
									<label htmlFor=''>&nbsp;</label>
									<Button type='submit' label='Cari' className='p-button-sm p-button-success' icon='pi pi-search' />
								</div>
							</div>
						</form>
					)
				}}
			</Formik>
		</React.Fragment>
	)

	const bodyStatus = (rowData) => {
		let status
		if (rowData.tahapan === 6) {
			status = <Label type={'success'}>Selesai</Label>
		} else if (rowData.penolakan === true || rowData.pernah_ditolak === true) {
			status = <Label type={'danger'}>Ditolak/pernah ditolak</Label>
		} else {
			status = '-'
		}
		return status
	}

	const allowExpansion = (rowData) => {
		return rowData.detail.length > 0
	}

	return (
		<>
			<Toast ref={toast} />
			<Head>
				<title>Pengajuan Tagihan</title>
			</Head>
			<Belakang>
				<Judul>Pengajuan Tagihan</Judul>
				<Card className='card-search my-3'>{Pencarian}</Card>
				<div className='flex justify-end mb-3'>
					<Button
						className='p-button-sm'
						label={'Tambah Tagihan'}
						onClick={() => {
							router.push('/pengajuan-tagihan/form')
						}}
					/>
				</div>
				<DatatablePrimeV2
					data={data}
					dialogDelete={dialogDelete}
					setDialogDelete={setDialogDelete}
					deleteTagihan={deleteTagihan}
					first={first}
					length={length}
					loading={loading}
					onSort={(e) => {
						setSort(e.multiSortMeta)
						if (e.multiSortMeta.length > 0) {
							switch (e.multiSortMeta[0].field) {
								case 'no_spp':
									setOrderCol(0)
									break

								case 'nama_tagihan':
									setOrderCol(1)
									break

								case 'tanggal':
									setOrderCol(2)
									break
							}

							switch (e.multiSortMeta[0].order) {
								case -1:
									setOrderDir('desc')
									break

								case 1:
									setOrderDir('asc')
									break
							}
						}
					}}
					setFirst={setFirst}
					setLength={setLength}
					setPage={setPage}
					sort={sort}
					totalRecords={totalRecords}
					page={page}
					expandRow={expandRow}
				>
					<Column expander={allowExpansion} style={{ width: '50px' }} />
					<Column field='no_spp' header='Nomor SPP' sortable></Column>
					<Column field='nama_tagihan' header='Jenis Tagihan' sortable></Column>
					<Column field='tanggal_spp' header='Tanggal SPP' body={bodyTanggal} sortable></Column>
					<Column header='Status' body={bodyStatus}></Column>
					<Column header='Action' body={actionBodyTemplate}></Column>
				</DatatablePrimeV2>
			</Belakang>
		</>
	)
}