import { CSSProperties } from "react";
import sQuadImageNoReflections from "./Melder_NoReflections.png";
import sQuadReflection from "./reflektion.png";
import { useButtons } from "./useButtons";
import { useSounds } from "./useSounds";
import Image from "next/image";
import { useDmeStore } from "_store/pilot/dmeStore";

const DME_BUTTON_STYLES: CSSProperties = {
	cursor: "pointer",
	zIndex: "9999",
	backgroundColor: "transparent",
	border: "none",
};

export interface DisplayLineProps {
	style?: CSSProperties;
	textLeft?: string;
	textMid?: string;
	textRight?: string;
}

const DisplayLine = ({
	style = {},
	textLeft,
	textMid,
	textRight,
}: DisplayLineProps) => {
	const INNER_TEXT_PARTS: CSSProperties = {
		fontFamily: "Melder",
		flex: "1",
		flexBasis: "auto",
		overflowWrap: "break-word",
	};

	return (
		<div
			style={{
				fontFamily: "Famirids",
				display: "flex",
				flexWrap: "wrap",
				...style,
			}}
		>
			<span style={INNER_TEXT_PARTS}>{textLeft}</span>
			<span style={{ textAlign: "center", ...INNER_TEXT_PARTS }}>
				{textMid}
			</span>
			<span style={{ textAlign: "end", ...INNER_TEXT_PARTS }}>{textRight}</span>
		</div>
	);
};

export const Dme = () => {
	useSounds();
	const { handleButton } = useButtons();
	const lines = useDmeStore((state) => state.lines);

	return (
		<div
			style={{
				display: "grid",
				aspectRatio: "1037 / 800",
				color: "black",
				height: "auto",
				width: "auto",
				maxHeight: "100%",
				maxWidth: "100%",
				overflow: "hidden",
				gridTemplateColumns:
					"25.84% 6.08% 10.99% 11.57% 11.28% 10.90% 18.71% 4.63%",
				gridTemplateRows: "2.66% 9.3% 8.9% 7.2% 45.05% 27%",
			}}
		>
			<Image
				src={sQuadImageNoReflections}
				alt="sQuadImage"
				style={{
					zIndex: 0,
					height: "100%",
					width: "100%",
					gridArea: "1 / 1 / 10 / 10",
				}}
			/>
			<button
				onClick={handleButton("main")}
				style={{ gridArea: "2 / 7 / 4 / 8", ...DME_BUTTON_STYLES }}
			/>
			<button
				onClick={handleButton("menu")}
				style={{ gridArea: "3 / 2 / 4 / 3", ...DME_BUTTON_STYLES }}
			/>
			{/* <button
                    onClick={handleButton('left')}
                    style={{ gridArea: '3 / 4 / 4 / 5', ...DME_BUTTON_STYLES }}
                />
                <button
                    onClick={handleButton('right')}
                    style={{ gridArea: '3 / 5 / 4 / 6', ...DME_BUTTON_STYLES }}
                /> */}
			<Image
				src={sQuadReflection}
				alt="sQuadImage"
				style={{
					zIndex: 1,
					height: "100%",
					width: "100%",
					gridArea: "1 / 1 / 10 / 10",
				}}
			/>
			<div
				id="display"
				style={{
					display: "flex",
					flexDirection: "column",
					justifyContent: "space-between",
					zIndex: "2",
					gridArea: "5 / 2 / 6 / 6",
					paddingTop: "10px",
					paddingLeft: "2px",
					paddingRight: "2px",
					overflowX: "hidden",
					overflowY: "auto",
				}}
			>
				{lines.map((l, i) => {
					return <DisplayLine key={`line-${i}`} {...l} />;
				})}
			</div>
		</div>
	);
};
