import React from 'react';
import {useCurrentFrame} from 'remotion';
import {Figur} from '../baukasten/figur';
import {Blende, atmen, huepfer} from '../baukasten/helfer';
import {Blaetterwind} from '../baukasten/natur';
import {Ort} from '../baukasten/orte';
import {ApfelBild, Kaefer, Milch, Nein, Schnecke, Wurm} from './bilder';
import {BildKarte, Buehne, FrageKarte, HochUntertitel, Hochformat} from './hochformat';
import {TEXTE, plane} from './plan';

// Lern-Short „Was frisst ein Igel?“: Pino groß in der Mitte, darüber ploppen Käfer, Wurm und Schnecke
// auf; Milch und Obst sind nichts für Igel (sanft durchgestrichen). Passt zum Elternhinweis aus Folge 1.

export const S_IGEL = plane('igel', [
	{id: 'bild0', dauer: 1.0},
	{id: 'e1', wer: 'ERZ', pause: 3},
	{id: 'p1', wer: 'PINO'},
	{id: 'e2', wer: 'ERZ', pause: 0.3},
	{id: 'e3', wer: 'ERZ', pause: 0.3},
	{id: 'e4', wer: 'ERZ'},
	{id: 'p2', wer: 'PINO'},
	{id: 'e5', wer: 'ERZ'},
	{id: 'p3', wer: 'PINO'},
	{id: 'bild1', dauer: 1.2},
]);

const PINO = {x: 960, y: 790, hoehe: 300};

export const Igel: React.FC = () => {
	const f = useCurrentFrame();
	const {z, dauer} = S_IGEL;
	const hops = huepfer(f, z.p1.start, 16, 10) + huepfer(f, z.p2.start, 16, 10) + huepfer(f, z.p3.start, 16, 10);
	return (
		<Hochformat>
			<Buehne x={PINO.x}>
				<Ort name="garten_herbst" />
				<Blaetterwind anzahl={8} seed="igel" tempo={0.6} yBereich={[400, 900]} />
				<Figur
					pose={[
						[0, 'pino_A4_staunen'],
						[z.p1.start - 4, 'pino_A3_lachen'],
						[z.e2.start, 'pino_B_blick-nach-oben'],
						[z.p2.start - 4, 'pino_A3_lachen'],
						[z.e5.start, 'pino_A4_staunen'],
						[z.p3.start - 4, 'pino_A3_lachen'],
					]}
					x={PINO.x}
					y={PINO.y + hops}
					hoehe={PINO.hoehe}
					stauchY={atmen(f, 1, 0.015)}
				/>
			</Buehne>
			<FrageKarte text={TEXTE.zeilen['igel/frage']} />
			{/* Das fressen Igel */}
			<BildKarte x={230} y={660} ab={z.e2.start} aus={z.e5.start}>
				<Kaefer />
			</BildKarte>
			<BildKarte x={540} y={610} ab={z.e3.start} aus={z.e5.start}>
				<Wurm />
			</BildKarte>
			<BildKarte x={850} y={660} ab={z.e4.start} aus={z.e5.start}>
				<Schnecke />
			</BildKarte>
			{/* Das lieber nicht */}
			<BildKarte x={330} y={640} ab={z.e5.start + 12} aus={z.p3.start}>
				<Milch />
				<Nein />
			</BildKarte>
			<BildKarte x={750} y={640} ab={z.e5.start + 22} aus={z.p3.start}>
				<ApfelBild />
				<Nein />
			</BildKarte>
			<HochUntertitel zeilen={S_IGEL.liste} />
			<Blende dauer={dauer} rein={8} raus={14} />
		</Hochformat>
	);
};