// MenuPixel: menu de início de jogo. Os itens entram em fila e a seta ► pula de um para o outro a cada `troca` quadros.
import React from 'react';
import {COR, FONTE_TITULO, LARGURA_UTIL, caber, mola, seg, useF} from '../base';

export type MenuPixelProps = {itens: string[]; inicio?: number; troca?: number; y?: number; tamanho?: number};
export const MenuPixel: React.FC<MenuPixelProps> = ({itens, inicio = 0, troca = 10, y = 740, tamanho = 76}) => {
  const f = useF() - inicio;
  const sel = Math.min(itens.length - 1, Math.max(0, Math.floor((f - 12) / troca)));
  const tam = Math.min(...itens.map((t) => caber('► ' + t, tamanho, LARGURA_UTIL - 60, FONTE_TITULO, 400, 0)));
  const alt = tam * 2.1;
  const topo = y - (itens.length * alt) / 2;
  return <>{itens.map((t, i) => {
    const p = mola(seg(f, i * 4, i * 4 + 9), 1.8);
    const ativo = i === sel && f >= 12;
    return <div key={i} style={{position: 'absolute', left: 80, width: LARGURA_UTIL, top: topo + i * alt, height: alt * 0.86, transform: `translateX(${(1 - p) * -1100}px)`, background: ativo ? COR.magenta : COR.noite, border: `8px solid ${COR.creme}`, boxShadow: `10px 10px 0 ${COR.noite}`, fontFamily: FONTE_TITULO, fontSize: tam, color: ativo ? COR.amarelo : COR.creme, display: 'flex', alignItems: 'center', paddingLeft: 36, whiteSpace: 'nowrap'}}>
      <span style={{width: tam * 1.4, opacity: ativo && Math.floor(f / 4) % 2 === 0 ? 0.35 : 1}}>{ativo ? '►' : ''}</span>{t}
    </div>;
  })}</>;
};