import { DataTable } from 'primereact/datatable'
import { Dropdown } from 'primereact/dropdown'
import { Paginator } from 'primereact/paginator'
import { DialogDashboard, DialogDelete } from './Dialog'

export const DatatablePrimeV2 = ({
	children,
	data,
	loading,
	sort,
	first,
	setLength,
	totalRecords,
	setPage,
	setFirst,
	length,
	onSort,
	dataDialog = { no_spp: false },
	displayDialog,
	setDisplayDialog,
	dialogDelete = { visible: false },
	setDialogDelete,
	deleteTagihan,
	page,
	expandRow,
}) => {
	const onPageChange = (event) => {
		setPage(event.page)
		setFirst(event.first)
	}

	const templatePaginator = {
		layout: 'RowsPerPageDropdown FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport',
		RowsPerPageDropdown: (options) => {
			const dropdownOptions = [
				{ label: 10, value: 10 },
				{ label: 50, value: 50 },
				{ label: 100, value: 100 },
				{ label: 'All', value: options.totalRecords },
			]

			return (
				<Dropdown
					value={options.value}
					options={dropdownOptions}
					onChange={(e) => {
						options.onChange(e)
						setLength(e.value)
					}}
				/>
			)
		},
		CurrentPageReport: (options) => {
			return (
				<span className='w-fit ml-4' style={{ color: 'var(--text-color)', userSelect: 'none', textAlign: 'center' }}>
					{options.first} - {options.last} of {options.totalRecords}
				</span>
			)
		},
	}

	return (
		<>
			<DataTable
				value={data}
				size='small'
				className='dt-dashboard'
				stripedRows
				loading={loading}
				sortMode='multiple'
				removableSort={true}
				multiSortMeta={sort}
				onSort={onSort}
				{...expandRow}
			>
				{children}
			</DataTable>
			{(data.length > 5 || page > 0) && (
				<Paginator
					first={first}
					rows={length}
					template={templatePaginator}
					totalRecords={totalRecords}
					onPageChange={onPageChange}
				/>
			)}

			{dataDialog.no_spp && (
				<DialogDashboard data={dataDialog} displayDialog={displayDialog} setDisplayDialog={setDisplayDialog} />
			)}

			{dialogDelete.visible === true && (
				<DialogDelete data={dialogDelete} setDelete={setDialogDelete} onCallback={deleteTagihan} />
			)}
		</>
	)
}