// MenuOSD: menu de seleção (caixa preta a 72% com borda de 6 px branco quente): título, e itens em VT323 84 px. O cursor `►` e
// a barra azul pulam de item em item a cada 18 quadros (a barra muda em 2 quadros). A caixa abre de 0,7x a 1x com sobra.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, eb} from '../base';

export type MenuOSDProps = {titulo?: string; itens: string[]; inicio?: number; passo?: number; y?: number; fim?: number};

export const MenuOSD: React.FC<MenuOSDProps> = ({titulo = 'SELECIONE A FITA', itens, inicio = 0, passo = 18, y = 700, fim}) => {
  const f = useCurrentFrame();
  const t = f - inicio;
  if (t < 0 || (fim !== undefined && f >= fim)) return null;
  const p = eb(t / 12, 1.6);
  const sel = Math.min(itens.length - 1, Math.floor(Math.max(0, t - 10) / passo));
  const linha = 120;
  const altura = 150 + itens.length * linha + 50;
  const tam = Math.min(84, ...itens.map((it) => caber(it.toUpperCase(), 84, LARGURA_UTIL - 200, 400, 0, FONTE.apoio.split('"')[1])));
  return <div style={{position: 'absolute', left: SEGURA.lado, top: y - altura / 2, width: LARGURA_UTIL, height: altura, background: 'rgba(16,18,21,0.72)', border: `6px solid ${COR.osd}`, boxSizing: 'border-box', transform: `scale(${Math.max(0.001, 0.7 + 0.3 * p)})`}}>
    <div style={{height: 110, lineHeight: '110px', textAlign: 'center', fontFamily: FONTE.apoio, fontSize: 64, color: COR.amarelo, borderBottom: `4px solid ${COR.osd}`, textShadow: '3px 0 rgba(255,40,70,0.7), -3px 0 rgba(0,220,255,0.7)'}}>{titulo}</div>
    {itens.map((it, i) => {
      const ativo = i === sel;
      return <div key={i} style={{position: 'absolute', left: 30, right: 30, top: 130 + i * linha, height: linha - 14, background: ativo ? COR.azul : 'transparent', fontFamily: FONTE.apoio, fontSize: tam, lineHeight: `${linha - 14}px`, color: COR.osd, paddingLeft: 90, opacity: t > 6 + i * 2 ? 1 : 0, textShadow: '3px 0 rgba(255,40,70,0.6), -3px 0 rgba(0,220,255,0.6)'}}>
        {ativo && <span style={{position: 'absolute', left: 24, color: COR.amarelo}}>►</span>}{it.toUpperCase()}
      </div>;
    })}
  </div>;
};