// Cena: janela de tempo de um plano (troca "deslizar"). Dentro dela, useCurrentFrame() começa em 0.
// A saída da cena cruza 9 quadros com a entrada da próxima.
import React, {createContext, useContext} from 'react';
import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
import {e5, seg} from '../base';

export type Entrada = 'direita' | 'esquerda' | 'subir' | 'zoom' | 'nenhuma';
export const SOBREPOE = 9; // quadros em que a saída desta cena cruza a entrada da próxima

const CenaCtx = createContext({duracao: 60});
/** duração da cena atual em quadros (sem a sobreposição) */
export const useDuracaoCena = () => useContext(CenaCtx).duracao;

export type CenaProps = {de: number; ate: number; entrada?: Entrada; ultima?: boolean; children: React.ReactNode};

const estilo = (f: number, duracao: number, entrada: Entrada, ultima: boolean): React.CSSProperties => {
  const en = entrada === 'nenhuma' ? 0 : 1 - e5(seg(f, 0, 10));
  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
  let tf = '';
  if (entrada === 'direita') tf += `translateX(${en * 1080}px) `;
  if (entrada === 'esquerda') tf += `translateX(${-en * 1080}px) `;
  if (entrada === 'subir') tf += `translateY(${en * 900}px) `;
  if (entrada === 'zoom') tf += `scale(${1 + en * 0.6}) `;
  tf += `translateX(${-xo * 460}px) scale(${1 - xo * 0.06})`;
  const blur = en * 10 + xo * 8;
  return {transform: tf, opacity: 1 - xo * 0.9, filter: blur > 0.3 ? `blur(${blur}px)` : undefined};
};

const Janela: React.FC<{duracao: number; entrada: Entrada; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, ultima, children}) => {
  const f = useCurrentFrame();
  return <AbsoluteFill style={estilo(f, duracao, entrada, ultima)}>{children}</AbsoluteFill>;
};

export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'direita', ultima = false, children}) => {
  const duracao = ate - de;
  return <Sequence from={de} durationInFrames={duracao + (ultima ? 0 : SOBREPOE)} layout="none">
    <CenaCtx.Provider value={{duracao}}>
      <Janela duracao={duracao} entrada={entrada} ultima={ultima}>{children}</Janela>
    </CenaCtx.Provider>
  </Sequence>;
};