import React from 'react';
import {ClipFigur, Figur, Kamera, type Posenfolge} from '../baukasten/figur';
import type {Gang} from '../baukasten/gang';
import {Vignette} from '../baukasten/helfer';
import {BODEN} from '../baukasten/orte';
import {Abenddunkel, GartenAbend, Laterne, WAND_VOLL, WandSchatten, laterneInNoasHand} from './teile';

// Gemeinsame Bühne für Szene 4–7: die drei an der Hauswand, die Laterne als einzige Lichtquelle.
// Lulu und Pino werfen ihren Schatten an die Wand (Noa nicht: ihr Bild enthält die Laterne samt Stab,
// deren Schatten wäre falsch – die Lampe ist ja das Licht); er nimmt dieselbe Pose, Drehung und Stauchung an
// (nickt Lulu, nickt ihr Schatten mit). Feste Plätze, damit die Szenen zusammenpassen.

export const PLATZ = {noa: 700, pino: 880, lulu: 1180, laterneBoden: {x: 560, y: BODEN - 56}};

export type Buehne = {
	kam: {x: number; y: number; zoom: number};
	laterne: {inHand: boolean; x?: number; y?: number; licht: number; schwung?: number};
	noa: {pose: string | Posenfolge; x?: number};
	pino: {pose: string | Posenfolge; x: number; gang?: Gang; drehung?: number; y?: number; k?: number; versatz?: number};
	lulu: {pose: string | Posenfolge; x?: number; hell?: number; drehung?: number; stauchY?: number; k?: number};
	wandExtra?: React.ReactNode; // z. B. Hand-Schatten
	f: number;
};

export const Wandszene: React.FC<Buehne> = ({kam, laterne, noa, pino, lulu, wandExtra, f}) => {
	const noaX = noa.x ?? PLATZ.noa;
	const luluX = lulu.x ?? PLATZ.lulu;
	const hand = laterneInNoasHand(noaX);
	const lat = laterne.inHand ? {x: hand.x, y: hand.y} : {x: laterne.x ?? PLATZ.laterneBoden.x, y: laterne.y ?? PLATZ.laterneBoden.y};
	const s = hand.s;
	const kLulu = lulu.k ?? 1.12; // Lulus Schatten: etwas größer als Lulu, Kopf und Hals passen an die Wand
	const kPino = pino.k ?? 1 + 220 / Math.max(80, Math.abs(pino.x - lat.x));
	const hell = lulu.hell ?? 1;
	const pinoGeht = pino.gang?.geht(f);
	return (
		<>
			<Kamera {...kam}>
				<GartenAbend wandVoll />
				{/* Schatten an der Wand (hinter den Figuren) */}
				<WandSchatten pose={lulu.pose} x={luluX} licht={lat} hoehe={340 * 2.05} k={kLulu} wand={WAND_VOLL} drehung={lulu.drehung} stauchY={lulu.stauchY} />
				<WandSchatten pose={pinoGeht ? 'pino_A6_blick-rechts' : pino.pose} x={pino.x} licht={lat} hoehe={340 * 0.4} k={kPino} wand={WAND_VOLL} drehung={pino.drehung} versatz={pino.versatz} />
				{wandExtra}
				<Figur pose={lulu.pose} x={luluX} y={BODEN - 6} drehung={lulu.drehung} stauchY={lulu.stauchY} filter={hell < 1 ? `brightness(${hell})` : undefined} />
				<Figur pose={noa.pose} x={noaX} y={BODEN} />
				{laterne.inHand ? (
					<Laterne x={lat.x} y={lat.y} s={s} licht={laterne.licht} schwung={laterne.schwung ?? 0} stab={false} />
				) : (
					<Laterne x={lat.x} y={lat.y} s={s} licht={laterne.licht} stab={false} />
				)}
				{pinoGeht && pino.gang ? (
					<ClipFigur name="pino_C1_gehen-schleife" start={pino.gang.clipStart} tempo={pino.gang.tempo} schleife spiegeln={pino.gang.spiegeln} x={pino.gang.x(f)} y={BODEN} />
				) : (
					<Figur pose={pino.pose} x={pino.x} y={pino.y ?? BODEN} drehung={pino.drehung} />
				)}
				<Abenddunkel licht={lat} staerke={0.42} radius={640} />
			</Kamera>
			<Vignette />
		</>
	);
};