var-monorepo/apps/dispatch/app/pilot/_components/mrt/Mrt.tsx

import { CSSProperties } from "react";
import MrtImage from "./MRT.png";
import MrtMessageImage from "./MRT_MESSAGE.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 {
	lineStyle?: CSSProperties;
	style?: CSSProperties;
	textLeft?: string;
	textMid?: string;
	textRight?: string;
	textSize: "1" | "2" | "3" | "4";
}

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

	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, page } = useMrtStore((state) => state);

	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%",
			}}
		>
			{page !== "sds" && (
				<Image
					src={MrtImage}
					alt="MrtImage"
					style={{
						zIndex: 0,
						height: "100%",
						width: "100%",
						gridArea: "1 / 1 / 13 / 13",
					}}
				/>
			)}
			{page === "sds" && (
				<Image
					src={MrtMessageImage}
					alt="MrtImage-Message"
					style={{
						zIndex: 0,
						height: "100%",
						width: "100%",
						gridArea: "1 / 1 / 13 / 13",
					}}
				/>
			)}

			<button
				onClick={handleButton("home")}
				style={{ gridArea: "2 / 4 / 3 / 5", ...MRT_BUTTON_STYLES }}
			/>
			<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={
						page === "sds"
							? {
									gridArea: "2 / 3 / 3 / 4",
									marginLeft: "9px",
									marginTop: "auto",

									...MRT_DISPLAYLINE_STYLES,
									...lines[0]?.style,
								}
							: {
									gridArea: "4 / 3 / 5 / 4",
									marginLeft: "9px",
									marginTop: "auto",
									...MRT_DISPLAYLINE_STYLES,
									...lines[0]?.style,
								}
					}
				/>
			)}
			{lines[1] && (
				<DisplayLine
					lineStyle={{
						overflowX: "hidden",
						maxHeight: "100%",
						overflowY: "auto",
					}}
					{...lines[1]}
					style={
						page === "sds"
							? {
									gridArea: "4 / 2 / 10 / 4",
									marginLeft: "3px",
									...MRT_DISPLAYLINE_STYLES,
									...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>
	);
};