// NotaDatilografada: pedaço de papel rasgado com texto que bate na máquina de escrever (Special Elite), uma palavra circulada a caneta vermelha
// que se desenha, e fita no topo. `circular` é a palavra a destacar.
import React from 'react';
import {COR, FONTE_TEXTO, LARGURA_UTIL, caber, mola, seg, useF} from '../base';
import {FitaAdesiva} from '../formas/FitaAdesiva';
import {rasgado} from '../lib/rasgado';

export type NotaDatilografadaProps = {texto: string; circular?: string; inicio?: number; y?: number; tamanho?: number; ritmo?: number};
export const NotaDatilografada: React.FC<NotaDatilografadaProps> = ({texto, circular, inicio = 0, y = 740, tamanho = 100, ritmo = 1.4}) => {
  const f = useF() - inicio;
  const p = mola(seg(f, 0, 10), 1.8);
  const W = 840, H = 760;
  const n = Math.max(0, Math.floor((f - 8) / ritmo));
  const linhas = texto.split('\n');
  const maiorLinha = linhas.reduce((a, b) => (a.length > b.length ? a : b), '');
  const tam = caber(maiorLinha, tamanho, W - 120, FONTE_TEXTO, 400, 0);
  let gasto = 0;
  const circ = seg(f, 8 + texto.length * ritmo + 4, 8 + texto.length * ritmo + 16);
  return <>
    <div style={{position: 'absolute', left: (1080 - W) / 2, top: y - H / 2, width: W, height: H, transform: `translateY(${(1 - p) * 900}px) rotate(${-2 + (1 - p) * 10}deg)`, filter: 'drop-shadow(0 12px 9px rgba(0,0,0,0.35))'}}>
      <div style={{position: 'absolute', inset: 0, background: COR.branco, clipPath: rasgado(W, H, 11, 11, 30)}} />
      <div style={{position: 'absolute', left: 60, right: 60, top: 0, bottom: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', fontFamily: FONTE_TEXTO, fontSize: tam, lineHeight: 1.25, color: COR.tinta}}>
        {linhas.map((l, i) => {
          const ini = gasto; gasto += l.length;
          const vis = l.slice(0, Math.max(0, n - ini));
          const idx = circular ? l.indexOf(circular) : -1;
          return <div key={i} style={{position: 'relative', whiteSpace: 'pre', height: tam * 1.25}}>{vis}
            {idx >= 0 && circular && <svg width={circular.length * tam * 0.62 + 50} height={tam * 1.7} style={{position: 'absolute', left: idx * tam * 0.6 - 24, top: -tam * 0.22, overflow: 'visible'}}><ellipse cx={(circular.length * tam * 0.6 + 40) / 2} cy={tam * 0.8} rx={(circular.length * tam * 0.6 + 40) / 2} ry={tam * 0.62} fill="none" stroke={COR.vermelho} strokeWidth="9" strokeLinecap="round" strokeDasharray="1400" strokeDashoffset={1400 * (1 - circ)} transform={`rotate(-3 ${(circular.length * tam * 0.6) / 2} ${tam * 0.8})`} /></svg>}
          </div>;
        })}
      </div>
    </div>
    <FitaAdesiva x={540} y={y - H / 2 + 16} largura={300} rot={-3} inicio={inicio + 8} />
  </>;
};