// Menu: o menu que abre do botão "+". Popover branco, cantos 20 px, sombra longa. Abre a partir do canto
// (escala 0.92 -> 1 + desfoque) e uma faixa de seleção desce pelos itens nos quadros de `passar`.
// `x`/`y` = canto de cima à esquerda, em px da tela. Ícones: 'clipe' 'pasta' 'luz' 'plug' 'lupa' 'globo' 'pincel'.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE_U, SOMBRA, e3, e4, seg} from '../base';

export type ItemMenu = {texto: string; icone?: string; seta?: boolean; apagado?: boolean};
export type MenuProps = {itens: ItemMenu[]; x?: number; y?: number; largura?: number; inicio?: number; passar?: {em: number; item: number}[]; fechar?: number};

const ICONES: Record<string, string> = {
  clipe: 'M15 7l-6.5 6.5a2.5 2.5 0 003.5 3.5L18.5 10a4.5 4.5 0 00-6.4-6.4L5.6 10.1a6.5 6.5 0 009.2 9.2L20 14',
  pasta: 'M3 7h6l2 2h10v10H3z',
  luz: 'M9 18h6M10 21h4M12 3a6 6 0 00-3.5 10.9V16h7v-2.1A6 6 0 0012 3z',
  plug: 'M9 3v5M15 3v5M6 8h12v3a6 6 0 01-12 0zM12 17v4',
  lupa: 'M11 4a7 7 0 100 14 7 7 0 000-14zM20 20l-4-4',
  globo: 'M12 3a9 9 0 100 18 9 9 0 000-18zM3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18',
  pincel: 'M4 20c2 0 4-1 4-3a2 2 0 00-4 0M8 15l11-11 1 1-11 11',
};

export const Menu: React.FC<MenuProps> = ({itens, x = 330, y = 120, largura = 440, inicio = 0, passar = [], fechar}) => {
  const f = useCurrentFrame();
  const p = e4(seg(f, inicio, inicio + 12));
  const sai = fechar !== undefined ? e4(seg(f, fechar, fechar + 8)) : 0;
  const alturaItem = 62;
  let sel = -1, ySel = 0;
  const ps = [...passar].sort((a, b) => a.em - b.em);
  for (let i = 0; i < ps.length; i++) if (f >= ps[i].em) {
    const ant = i > 0 ? ps[i - 1].item : ps[i].item;
    const t = e3(seg(f, ps[i].em, ps[i].em + 6));
    sel = ps[i].item; ySel = (ant + (ps[i].item - ant) * t) * alturaItem;
  }
  return <div style={{position: 'absolute', left: x, top: y, width: largura, background: COR.cartao, borderRadius: 20, boxShadow: SOMBRA.menu,
    border: `1.5px solid ${COR.linha}`, padding: '12px 10px', fontFamily: FONTE_U, transformOrigin: '10% 100%',
    opacity: p * (1 - sai), transform: `scale(${0.92 + 0.08 * p - 0.04 * sai})`, filter: p < 0.95 ? `blur(${(1 - p) * 6}px)` : undefined}}>
    <div style={{position: 'relative'}}>
      {sel >= 0 && <div style={{position: 'absolute', left: 0, right: 0, top: ySel, height: alturaItem, borderRadius: 12, background: '#F1EEE7'}} />}
      {itens.map((it, i) => <div key={i} style={{position: 'relative', height: alturaItem, display: 'flex', alignItems: 'center', gap: 18, padding: '0 18px',
        fontSize: 25, color: it.apagado ? '#C4BFB4' : COR.tinta, opacity: seg(f, inicio + 3 + i * 1.5, inicio + 9 + i * 1.5)}}>
        <svg width="26" height="26" viewBox="0 0 24 24" style={{flex: 'none'}}><path d={ICONES[it.icone ?? 'clipe'] ?? ICONES.clipe} stroke={it.apagado ? '#C4BFB4' : '#6B665C'} strokeWidth="1.7" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
        <span style={{flex: 1}}>{it.texto}</span>
        {it.seta && <span style={{color: COR.mute, fontSize: 22}}>›</span>}
      </div>)}
    </div>
  </div>;
};