"use client";
import { useLeftMenuStore } from "_store/leftMenuStore";
import { cn } from "@repo/shared-components";
import { SettingsIcon } from "lucide-react";
import { usePilotConnectionStore } from "_store/pilot/connectionStore";

export const SettingsBoard = () => {
	const { setSituationTabOpen, situationTabOpen } = useLeftMenuStore();
	const { followOwnAircraft, showOtherAircrafts, showOtherMissions, setMapOptions } =
		usePilotConnectionStore();
	const cross = (
		<svg
			aria-label="disabled"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			strokeWidth="4"
			strokeLinecap="round"
			strokeLinejoin="round"
		>
			<path d="M18 6 6 18" />
			<path d="m6 6 12 12" />
		</svg>
	);
	const check = (
		<svg aria-label="enabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
			<g
				strokeLinejoin="round"
				strokeLinecap="round"
				strokeWidth="4"
				fill="none"
				stroke="currentColor"
			>
				<path d="M20 6 9 17l-5-5"></path>
			</g>
		</svg>
	);

	return (
		<div className={cn("dropdown dropdown-top", situationTabOpen && "dropdown-open")}>
			<div className="indicator">
				<button
					className="btn btn-soft btn-sm btn-info"
					onClick={() => {
						setSituationTabOpen(!situationTabOpen);
					}}
				>
					<SettingsIcon size={18} />
				</button>
			</div>
			{situationTabOpen && (
				<div
					tabIndex={0}
					className="dropdown-content card bg-base-200 shadow-md z-[1100] ml-2 border-1 border-info min-w-[300px] max-h-[300px]"
				>
					<div className="card-body flex flex-row gap-4">
						<div className="flex flex-col w-full h-full gap-2">
							<h2 className="inline-flex items-center gap-2 text-lg font-bold mb-2">
								<SettingsIcon size={18} /> Map Einstellungen
							</h2>
							<div className="flex items-center gap-2">
								<label className="toggle text-base-content">
									<input
										type="checkbox"
										checked={followOwnAircraft}
										onChange={(e) => setMapOptions({ followOwnAircraft: e.target.checked })}
									/>
									{cross}
									{check}
								</label>
								Folge mir selbst
							</div>
							<div className="flex items-center gap-2">
								<label className="toggle text-base-content">
									<input
										type="checkbox"
										checked={showOtherAircrafts}
										onChange={(e) => setMapOptions({ showOtherAircrafts: e.target.checked })}
									/>
									{cross}
									{check}
								</label>
								Zeige andere Piloten
							</div>
							<div className="flex items-center gap-2">
								<label className="toggle text-base-content">
									<input
										type="checkbox"
										checked={showOtherMissions}
										onChange={(e) => setMapOptions({ showOtherMissions: e.target.checked })}
									/>
									{cross}
									{check}
								</label>
								Zeige andere Einsätze
							</div>
						</div>
					</div>
				</div>
			)}
		</div>
	);
};