"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { ConfigOptionalDefaults, ConfigOptionalDefaultsSchema } from "@repo/db/zod";
import { useForm } from "react-hook-form";
import { addMessage, disableMessage } from "../action";
import "react-datepicker/dist/react-datepicker.css"; // <-- Add this line at the top if using react-datepicker
import { Button } from "_components/ui/Button";
import { PaginatedTableRef } from "_components/PaginatedTable";
import { RefObject } from "react";

export const MessageForm = ({ tableRef }: { tableRef: RefObject<PaginatedTableRef | null> }) => {
	const disableMessageClient = async () => {
		await disableMessage();
		tableRef?.current?.refresh();
	};

	const form = useForm<ConfigOptionalDefaults>({
		resolver: zodResolver(ConfigOptionalDefaultsSchema),
	});

	return (
		<form
			onSubmit={form.handleSubmit(async (values) => {
				try {
					await addMessage(values);
					tableRef?.current?.refresh();
					form.reset();
				} catch (error) {
					console.error("Failed to add message", error);
				}
			})}
			className="grid grid-cols-6 gap-3"
		>
			<label className="floating-label col-span-6">
				<span>Notam</span>
				<input
					type="text"
					placeholder="Globales Notam"
					className="input input-md w-full mb-2"
					{...form.register("message")}
				/>
			</label>
			<div className="gap-2 flex justify-between col-span-6">
				<div className="flex flex-col gap-4">
					<div className="content-center">
						<input
							type="radio"
							value="INFO"
							{...form.register("color")}
							className="radio radio-info ml-2 mr-2"
						/>
						<span>Info</span>
						<input
							type="radio"
							value="SUCCESS"
							{...form.register("color")}
							className="radio radio-success ml-2 mr-2"
						/>
						<span>Success</span>
						<input
							type="radio"
							value="WARNING"
							{...form.register("color")}
							className="radio radio-warning ml-2 mr-2"
						/>
						<span>Warning</span>
						<input
							type="radio"
							value="ERROR"
							{...form.register("color")}
							className="radio radio-error ml-2 mr-2"
						/>
						<span>Error</span>
					</div>
					<div className="flex flex-col gap-2 ml-2">
						<label className="label">
							<input
								type="checkbox"
								className="checkbox checkbox-primary"
								{...form.register("maintenanceEnabled")}
							/>
							Wartungsmodus einschalten
						</label>
						<label className="label">
							<input
								type="checkbox"
								className="checkbox checkbox-primary"
								{...form.register("disableHPG")}
							/>
							HPG Alarmierung deaktivieren
						</label>
					</div>
				</div>
				<div className="flex flex-col justify-end">
					<div className="flex justify-center gap-2">
						<Button
							type="button"
							onSubmit={() => false}
							className="btn btn-soft"
							onClick={disableMessageClient}
						>
							Config zurücksetzen
						</Button>
						<Button
							type="submit"
							className="btn btn-primary"
							isLoading={form.formState.isSubmitting}
						>
							Speichern
						</Button>
					</div>
				</div>
			</div>
		</form>
	);
};
