// BlocoNota: uma página de anotações (cartão de papel branco com borda fina). Título em serifa, lista de tarefas cujos quadradinhos
// são riscados à mão (traço que se desenha) um depois do outro; a linha riscada apaga e ganha um traço por cima.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE_D, FONTE_T, c01, caber, e5, eb, seg} from '../base';
import {Traco, linha, retangulo} from '../formas/desenho';

export type ItemNota = {texto: string; feito?: boolean};
export type BlocoNotaProps = {titulo: string; itens: ItemNota[]; inicio?: number; y?: number; /** quadros entre um item riscado e o próximo */ intervalo?: number};

export const BlocoNota: React.FC<BlocoNotaProps> = ({titulo, itens, inicio = 0, y = 760, intervalo = 9}) => {
  const f = useCurrentFrame();
  const en = eb(seg(f, inicio, inicio + 18));
  const LH = 130, H = 250 + itens.length * LH + 40;
  const tt = caber(titulo, 84, 740, 700, -0.01);
  return <div style={{position: 'absolute', left: 96, width: 888, top: y - H / 2, height: H, background: COR.pagina, border: `3px solid ${COR.tinta}`, borderRadius: 28, boxShadow: '14px 14px 0 rgba(31,27,22,0.12)', transform: `translateY(${(1 - en) * 160}px) rotate(${(1 - en) * -2}deg) scale(${0.9 + 0.1 * en})`, opacity: c01(en * 2)}}>
    <div style={{position: 'absolute', left: 54, top: 52, fontFamily: FONTE_T, fontWeight: 500, fontSize: 26, letterSpacing: '0.14em', textTransform: 'uppercase', color: COR.mute}}>página · hoje</div>
    <div style={{position: 'absolute', left: 54, top: 100, fontFamily: FONTE_D, fontWeight: 700, fontSize: tt, letterSpacing: '-0.01em', color: COR.tinta, whiteSpace: 'nowrap'}}>{titulo}</div>
    <svg width={888} height={H} style={{position: 'absolute', left: 0, top: 0, overflow: 'visible'}}>
      <Traco d={linha(54, 214, 834, 214, 2, 2)} p={e5(seg(f, inicio + 6, inicio + 22))} cor={COR.tinta} largura={3} />
      {itens.map((it, i) => {
        const top = 250 + i * LH, t0 = inicio + 14 + i * intervalo;
        const caixa = e5(seg(f, t0, t0 + 8)), tick = e5(seg(f, t0 + 10 + (itens.length - i) * 0 + i * 2, t0 + 22 + i * 2));
        const riscado = it.feito !== false && f > t0 + 20 + i * 2;
        return <g key={i}>
          <Traco d={retangulo(54, top + 22, 60, 60, i + 3)} p={caixa} cor={COR.tinta} largura={5} />
          {it.feito !== false && <Traco d="M64 56 L84 78 L120 34" p={tick} cor={COR.lapis} largura={9} style={{transform: `translate(0, ${top}px)`}} />}
          {riscado && <Traco d={linha(150, top + 52, 150 + 560 * Math.min(1, it.texto.length / 22), top + 50, i + 7, 2)} p={e5(seg(f, t0 + 24 + i * 2, t0 + 34 + i * 2))} cor={COR.tinta} largura={4} />}
        </g>;
      })}
    </svg>
    {itens.map((it, i) => {
      const t0 = inicio + 14 + i * intervalo, e = e5(seg(f, t0, t0 + 12));
      const risc = it.feito !== false && f > t0 + 24 + i * 2;
      return <div key={i} style={{position: 'absolute', left: 150, top: 250 + i * LH + 20, fontFamily: FONTE_D, fontWeight: 600, fontSize: caber(it.texto, 60, 700, 600, -0.005), color: risc ? COR.mute : COR.tinta, opacity: e, transform: `translateX(${(1 - e) * 40}px)`, whiteSpace: 'nowrap'}}>{it.texto}</div>;
    })}
  </div>;
};