import { AlertInfo, deleteAlert, getAlerts } from '@/api/alerts'
import { ConfirmModal } from '@/components/ConfirmModal'
import { DataTable } from '@/components/DataTable'
import { useState } from 'preact/hooks'
import { useMutation, useQuery } from 'react-query'
import { AlertFormModal } from './components/AlertFormModal'

export const AlertsTable = () => {
	const alerts = useQuery('/alerts', () => getAlerts())

	const deleteMutation = useMutation(deleteAlert, {
		onSuccess: () => {
			alerts.refetch()
			setShowDelete(undefined)
		},
	})

	const [showNew, setShowNew] = useState(false)
	const [edited, setEdited] = useState<AlertInfo>()
	const [showDelete, setShowDelete] = useState<AlertInfo>()

	return (
		<div className="alerts">
			<div className="section-title">
				<h2>Alerts</h2>
				<button onClick={() => alerts.refetch()}>Refresh</button>
				<button onClick={() => setShowNew(true)}>Add alert</button>
			</div>

			<div className="box-shadow">
				<DataTable
					data={alerts.data ?? []}
					columns={[
						{ key: 'name', title: 'Name', render: (c) => c.name, scale: 1 },
						{
							key: 'lastStatus',
							title: 'Last status',
							render: (c) => c.lastStatus,
							width: '10rem',
						},
						{
							key: 'actions',
							title: 'Actions',
							width: '10rem',
							className: 'actions',
							render: (c) => (
								<div>
									<button onClick={() => setEdited(c)}>Edit</button>
									<button onClick={() => setShowDelete(c)}>Delete</button>
								</div>
							),
						},
					]}
				/>
			</div>

			{(showNew || edited) && (
				<AlertFormModal
					open
					alert={edited}
					onClose={() => {
						setEdited(undefined)
						setShowNew(false)
					}}
				/>
			)}

			{showDelete && (
				<ConfirmModal
					open
					onConfirm={() => deleteMutation.mutate(showDelete.id)}
					onCancel={() => setShowDelete(undefined)}
				>
					Are you sure you want to delete {showDelete.name} alert?
				</ConfirmModal>
			)}
		</div>
	)
}