"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { StationOptionalDefaultsSchema } from "@repo/db/zod";
import { set, useForm } from "react-hook-form";
import { z } from "zod";
import { BosUse, Country, Station } from "@repo/db";
import { FileText, LocateIcon, PlaneIcon } from "lucide-react";
import { Input } from "../../../../_components/ui/Input";
import { useState } from "react";
import { deleteStation, upsertStation } from "../action";
import { Button } from "../../../../_components/ui/Button";
import { redirect } from "next/navigation";

export const StationForm = ({ station }: { station?: Station }) => {
	const form = useForm<z.infer<typeof StationOptionalDefaultsSchema>>({
		resolver: zodResolver(StationOptionalDefaultsSchema),
		defaultValues: station,
	});
	const [loading, setLoading] = useState(false);
	const [deleteLoading, setDeleteLoading] = useState(false);
	return (
		<>
			<form
				onSubmit={form.handleSubmit(async (values) => {
					setLoading(true);
					const createdStation = await upsertStation(values, station?.id);
					setLoading(false);
					if (!station) redirect(`/admin/station`);
				})}
				className="grid grid-cols-6 gap-3"
			>
				<div className="card bg-base-200 shadow-xl col-span-2  max-xl:col-span-6">
					<div className="card-body">
						<h2 className="card-title">
							<FileText className="w-5 h-5" /> Allgemeines
						</h2>
						<Input
							form={form}
							label="BOS Rufname"
							name="bosCallsign"
							className="input-sm"
						/>
						<Input
							form={form}
							label="BOS Rufname (kurz)"
							name="bosCallsignShort"
							className="input-sm"
						/>
						<Input
							form={form}
							label="Betreiber"
							name="operator"
							className="input-sm"
						/>
						<Input
							form={form}
							label="ATC Rufname"
							name="atcCallsign"
							className="input-sm"
						/>
						<Input
							form={form}
							label="FIR (Flight Information Region)"
							name="fir"
							className="input-sm"
						/>
						<Input
							form={form}
							label="Leitstelle Rufname"
							name="bosRadioArea"
							className="input-sm"
						/>

						<label className="form-control w-full">
							<span className="label-text text-lg flex items-center gap-2">
								BOS Nutzung
							</span>
							<select
								className="input-sm select select-bordered select-sm"
								{...form.register("bosUse")}
							>
								{Object.keys(BosUse).map((use) => (
									<option key={use} value={use}>
										{use}
									</option>
								))}
							</select>
						</label>
					</div>
				</div>
				<div className="card bg-base-200 shadow-xl col-span-2  max-xl:col-span-6">
					<div className="card-body">
						<h2 className="card-title">
							<LocateIcon className="w-5 h-5" /> Standort + Ausrüstung
						</h2>
						<label className="form-control w-full">
							<span className="label-text text-lg flex items-center gap-2">
								Land
							</span>
							<select
								className="input-sm select select-bordered select-sm"
								{...form.register("country", {})}
							>
								{Object.keys(Country).map((use) => (
									<option key={use} value={use}>
										{use}
									</option>
								))}
							</select>
						</label>
						<Input
							form={form}
							label="Bundesland"
							name="locationState"
							className="input-sm"
						/>
						<Input
							form={form}
							label="Bundesland (kurz)"
							name="locationStateShort"
							className="input-sm"
						/>
						<span className="label-text text-lg flex items-center gap-2">
							Ausgerüstet mit:
						</span>
						<div className="form-control space-y-2">
							<label className="label cursor-pointer flex">
								<span className="flex-1 text-left">Winde</span>
								<input
									type="checkbox"
									className="toggle"
									{...form.register("hasWinch")}
								/>
							</label>
							<label className="label cursor-pointer flex">
								<span className="flex-1 text-left">Nachtsicht gerät</span>
								<input
									type="checkbox"
									className="toggle"
									{...form.register("hasNvg")}
								/>
							</label>
							<label className="label cursor-pointer flex">
								<span className="flex-1 text-left">
									24-Stunden Einsatzfähig
								</span>
								<input
									type="checkbox"
									className="toggle"
									{...form.register("is24h")}
								/>
							</label>
							<label className="label cursor-pointer flex">
								<span className="flex-1 text-left">Bergetau</span>
								<input
									type="checkbox"
									className="toggle"
									{...form.register("hasRope")}
								/>
							</label>
						</div>

						<Input
							form={form}
							label="Breitengrad"
							name="latitude"
							className="input-sm"
							formOptions={{ valueAsNumber: true }}
							type="number"
							step="any"
						/>
						<Input
							form={form}
							label="Längengrad"
							name="longitude"
							className="input-sm"
							formOptions={{ valueAsNumber: true }}
							type="number"
							step="any"
						/>
						<label className="label cursor-pointer flex">
							<span className="text-lg flex-1 text-left">
								Reichweiten ausblenden
							</span>
							<input
								type="checkbox"
								className="toggle"
								{...form.register("hideRangeRings")}
							/>
						</label>
					</div>
				</div>
				<div className="card bg-base-200 shadow-xl col-span-2  max-xl:col-span-6">
					<div className="card-body">
						<h2 className="card-title">
							<PlaneIcon className="w-5 h-5" /> Hubschrauber
						</h2>
						<Input
							form={form}
							label="Hubschrauber Typ"
							name="aircraft"
							className="input-sm"
						/>
						<Input
							form={form}
							formOptions={{ valueAsNumber: true }}
							type="number"
							label="Hubschrauber Geschwindigkeit"
							className="input-sm"
							name="aircraftSpeed"
						/>
						<Input
							form={form}
							label="Hubschrauber Registrierung"
							name="aircraftRegistration"
							className="input-sm"
						/>
					</div>
				</div>
				<div className="card bg-base-200 shadow-xl col-span-6">
					<div className="card-body ">
						<div className="flex w-full gap-4">
							<Button
								isLoading={loading}
								type="submit"
								className="btn btn-primary flex-1"
							>
								Speichern
							</Button>
							{station && (
								<Button
									isLoading={deleteLoading}
									onClick={async () => {
										setDeleteLoading(true);
										await deleteStation(station.id);
										redirect("/admin/station");
									}}
									className="btn btn-error"
								>
									Löschen
								</Button>
							)}
						</div>
					</div>
				</div>
			</form>
		</>
	);
};
