"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { KeywordOptionalDefaultsSchema } from "@repo/db/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { KEYWORD_CATEGORY, Keyword } from "@repo/db";
import { FileText } from "lucide-react";
import { Input } from "../../../../_components/ui/Input";
import { useState } from "react";
import { deleteKeyword, upsertKeyword } from "../action";
import { Button } from "../../../../_components/ui/Button";
import { redirect } from "next/navigation";
import { ListInput } from "_components/ui/List";

export const KeywordForm = ({ keyword }: { keyword?: Keyword }) => {
	const form = useForm<z.infer<typeof KeywordOptionalDefaultsSchema>>({
		resolver: zodResolver(KeywordOptionalDefaultsSchema),
		defaultValues: keyword,
	});
	const [loading, setLoading] = useState(false);
	const [deleteLoading, setDeleteLoading] = useState(false);
	return (
		<>
			<form
				onSubmit={form.handleSubmit(async (values) => {
					setLoading(true);
					const createdKeyword = await upsertKeyword(values, keyword?.id);
					setLoading(false);
					if (!keyword) redirect(`/admin/keyword`);
				})}
				className="grid grid-cols-6 gap-3"
			>
				<div className="card bg-base-200 shadow-xl col-span-6	">
					<div className="card-body">
						<h2 className="card-title">
							<FileText className="w-5 h-5" /> Allgemeines
						</h2>
						<label className="form-control w-full ">
							<span className="label-text text-lg flex items-center gap-2">
								Kategorie
							</span>
							<select
								className="input-sm select select-bordered select-sm w-full"
								{...form.register("category")}
							>
								{Object.keys(KEYWORD_CATEGORY).map((use) => (
									<option key={use} value={use}>
										{use}
									</option>
								))}
							</select>
						</label>
						<Input
							form={form}
							label="Abkürzung"
							name="abreviation"
							className="input-sm"
						/>
						<Input
							form={form}
							label="Name"
							placeholder="Atembeschwerden, die nicht zunehmen (ohne vitale Indikation)"
							name="name"
							className="input-sm"
						/>
						<Input
							form={form}
							label="zunehmende Atembeschwerden"
							placeholder="Beschreibung"
							name="description"
							className="input-sm"
						/>
						<ListInput
							className="input-sm"
							control={form.control}
							name="hpgMissionTypes"
							label="HPG Missions presets"
						/>
					</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>
							{keyword && (
								<Button
									isLoading={deleteLoading}
									onClick={async () => {
										setDeleteLoading(true);
										await deleteKeyword(keyword.id);
										redirect("/admin/keyword");
									}}
									className="btn btn-error"
								>
									Löschen
								</Button>
							)}
						</div>
					</div>
				</div>
			</form>
		</>
	);
};
