import { CSSProperties, useEffect } from "react";
import MrtImage from "./MRT.png";
import { useButtons } from "./useButtons";
import { useSounds } from "./useSounds";
import "./mrt.css";
import Image from "next/image";
import { useMrtStore } from "_store/pilot/MrtStore";

const MRT_BUTTON_STYLES: CSSProperties = {
	cursor: "pointer",
	zIndex: "9999",
	backgroundColor: "transparent",
	border: "none",
};
const MRT_DISPLAYLINE_STYLES: CSSProperties = {
	color: "white",
	zIndex: 1,
};

export interface DisplayLineProps {
	style?: CSSProperties;
	textLeft?: string;
	textMid?: string;
	textRight?: string;
	textSize: "1" | "2" | "3" | "4";
}

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

	return (
		<div
			className={`text-${textSize}`}
			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 Mrt = () => {
	useSounds();
	const { handleButton } = useButtons();
	const lines = useMrtStore((state) => state.lines);

	return (
		<div
			id="mrt-container"
			style={{
				containerName: "mrtContainer",
				display: "grid",
				aspectRatio: "1466 / 760",
				height: "auto",
				width: "auto",
				maxHeight: "100%",
				maxWidth: "100%",
				color: "white",
				gridTemplateColumns:
					"21.83% 4.43% 24.42% 18.08% 5.93% 1.98% 6.00% 1.69% 6.00% 9.35%",
				gridTemplateRows:
					"21.58% 11.87% 3.55% 5.00% 6.84% 0.53% 3.03% 11.84% 3.55% 11.84% 20.39%",
			}}
		>
			<Image
				src={MrtImage}
				alt="MrtImage"
				style={{
					zIndex: 0,
					height: "100%",
					width: "100%",
					gridArea: "1 / 1 / 13 / 13",
				}}
			/>
			<button
				onClick={handleButton("1")}
				style={{ gridArea: "2 / 5 / 3 / 6", ...MRT_BUTTON_STYLES }}
			/>
			<button
				onClick={handleButton("2")}
				style={{ gridArea: "2 / 7 / 3 / 7", ...MRT_BUTTON_STYLES }}
			/>
			<button
				onClick={handleButton("3")}
				style={{ gridArea: "2 / 9 / 3 / 10", ...MRT_BUTTON_STYLES }}
			/>
			<button
				onClick={handleButton("4")}
				style={{ gridArea: "4 / 5 / 6 / 6", ...MRT_BUTTON_STYLES }}
			/>
			<button
				onClick={handleButton("5")}
				style={{ gridArea: "4 / 7 / 6 / 7", ...MRT_BUTTON_STYLES }}
			/>
			<button
				onClick={handleButton("6")}
				style={{ gridArea: "4 / 9 / 6 / 10", ...MRT_BUTTON_STYLES }}
			/>
			<button
				onClick={handleButton("7")}
				style={{ gridArea: "8 / 5 / 9 / 6", ...MRT_BUTTON_STYLES }}
			/>
			<button
				onClick={handleButton("8")}
				style={{ gridArea: "8 / 7 / 9 / 7", ...MRT_BUTTON_STYLES }}
			/>
			<button
				onClick={handleButton("9")}
				style={{ gridArea: "8 / 9 / 9 / 10", ...MRT_BUTTON_STYLES }}
			/>
			<button
				onClick={handleButton("0")}
				style={{ gridArea: "10 / 7 / 11 / 8", ...MRT_BUTTON_STYLES }}
			/>

			{lines[0] && (
				<DisplayLine
					{...lines[0]}
					style={{
						gridArea: "4 / 3 / 5 / 4",
						marginLeft: "9px",
						marginTop: "auto",
						...MRT_DISPLAYLINE_STYLES,
						...lines[0]?.style,
					}}
				/>
			)}
			{lines[1] && (
				<DisplayLine
					{...lines[1]}
					style={{
						gridArea: "5 / 3 / 7 / 4",
						marginLeft: "3px",
						marginTop: "auto",
						...MRT_DISPLAYLINE_STYLES,
						...lines[1].style,
					}}
				/>
			)}
			{lines[2] && (
				<DisplayLine
					{...lines[2]}
					style={{
						gridArea: "8 / 2 / 9 / 4",
						...MRT_DISPLAYLINE_STYLES,
						...lines[2]?.style,
					}}
				/>
			)}
			{lines[3] && (
				<DisplayLine
					{...lines[3]}
					style={{
						gridArea: "9 / 2 / 10 / 4",
						marginRight: "10px",
						...MRT_DISPLAYLINE_STYLES,
						...lines[3]?.style,
					}}
				/>
			)}
		</div>
	);
};