"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { HeliportOptionalDefaultsSchema } from "@repo/db/zod";
import { useForm } from "react-hook-form";
import { Heliport, HeliportType } from "@repo/db";
import { FileText, LocateIcon } from "lucide-react";
import { Input } from "../../../../_components/ui/Input";
import { deleteHeliport, upsertHeliport } from "../action";
import { Button } from "../../../../_components/ui/Button";
import { redirect } from "next/navigation";
import toast from "react-hot-toast";

export const HeliportForm = ({ heliport }: { heliport?: Heliport }) => {
	const form = useForm({
		resolver: zodResolver(HeliportOptionalDefaultsSchema),
		defaultValues: heliport,
	});
	return (
		<>
			<form
				onSubmit={form.handleSubmit(async (values) => {
					await upsertHeliport(values, heliport?.id);
					toast.success("Daten gespeichert");
					if (!heliport) redirect(`/admin/heliport`);
				})}
				className="flex flex-wrap gap-3"
			>
				<div className="card bg-base-200 shadow-xl flex-1 basis-[300px]">
					<div className="card-body">
						<h2 className="card-title">
							<FileText className="w-5 h-5" /> Allgemeines
						</h2>
						<label className="form-control w-full">
							<select
								className="input-sm select select-bordered select-sm w-full"
								{...form.register("type")}
							>
								{Object.keys(HeliportType).map((use) => (
									<option key={use} value={use}>
										{use}
									</option>
								))}
							</select>
						</label>
						<Input form={form} label="Designator" name="designator" className="input-sm" />
						<Input
							form={form}
							label="Designator (6 Zeichen)"
							name="designatorSub6"
							className="input-sm"
						/>
						<Input form={form} label="FIR" name="fir" className="input-sm" />
						<Input form={form} label="Name" name="siteName" className="input-sm" />
						<Input
							form={form}
							label="Name (21 Zeichen)"
							name="siteNameSub21"
							className="input-sm"
						/>
						<Input
							form={form}
							label="Name (26 Zeichen)"
							name="siteNameSub26"
							className="input-sm"
						/>
						<textarea
							className="textarea textarea-bordered textarea-sm w-full"
							{...form.register("info")}
							placeholder="Info"
						/>
						<Input form={form} label="Krankenhaus" name="hospital" className="input-sm" />
					</div>
				</div>
				<div className="card bg-base-200 shadow-xl flex-1 basis-[300px]">
					<div className="card-body">
						<h2 className="card-title">
							<LocateIcon className="w-5 h-5" /> Standort
						</h2>
						<Input form={form} label="Bundesland (voller Name)" name="state" className="input-sm" />
						<Input
							form={form}
							label="Bundesland (2 Zeichen)"
							name="stateShort"
							className="input-sm"
						/>
						<Input
							form={form}
							formOptions={{
								valueAsNumber: true,
								value: null,
							}}
							label="Elevation"
							name="siteElevation"
							className="input-sm"
						/>
						<Input
							form={form}
							label="Elevation Einheit"
							name="siteElevationUnit"
							className="input-sm"
						/>
						<Input
							form={form}
							formOptions={{
								valueAsNumber: true,
							}}
							label="Latitude"
							name="lat"
							className="input-sm"
						/>
						<Input
							form={form}
							formOptions={{
								valueAsNumber: true,
							}}
							label="Longitude"
							name="lng"
							className="input-sm"
						/>
						<Input form={form} label="Land (2 Zeichen)" name="country" className="input-sm" />
					</div>
				</div>
				<div className="card bg-base-200 shadow-xl flex-[100%]">
					<div className="card-body ">
						<div className="flex w-full gap-4">
							<Button
								isLoading={form.formState.isSubmitting}
								type="submit"
								className="btn btn-primary flex-1"
							>
								Speichern
							</Button>
							{heliport && (
								<Button
									onClick={async () => {
										await deleteHeliport(heliport.id);
										redirect("/admin/heliport");
									}}
									className="btn btn-error"
								>
									Löschen
								</Button>
							)}
						</div>
					</div>
				</div>
			</form>
		</>
	);
};
