// ListaRabiscada: lista de tarefas de caderno. Cada item tem uma caixinha desenhada, o texto em Caveat escrito da esquerda para a direita
// e um visto vermelho que risca a caixinha no fim. Itens entram um a um.
import React from 'react';
import {COR, FONTE_TEXTO, caber, larguraTexto, seg, useF} from '../base';
import {ferver, traco} from '../lib/traco';

export type ListaRabiscadaProps = {itens: string[]; inicio?: number; intervalo?: number; y?: number; altura?: number};
export const ListaRabiscada: React.FC<ListaRabiscadaProps> = ({itens, inicio = 0, intervalo = 11, y = 740, altura = 230}) => {
  const f = useF() - inicio;
  const tam = Math.min(...itens.map((t) => caber(t, 190, 620, FONTE_TEXTO, 700, 0)));
  const topo = y - (itens.length * altura) / 2;
  return <div style={{position: 'absolute', inset: 0, filter: ferver(f)}}>{itens.map((t, i) => {
    const t0 = i * intervalo;
    const w = larguraTexto(t, tam, FONTE_TEXTO, 700, 0);
    return <div key={i} style={{position: 'absolute', left: 120, width: 860, top: topo + i * altura, height: altura}}>
      <svg width="150" height="150" viewBox="0 0 100 100" style={{position: 'absolute', left: 0, top: altura / 2 - 75, overflow: 'visible'}}>
        <path d="M12 14 L88 10 L90 88 L10 90 Z" {...traco(seg(f, t0, t0 + 6), COR.tinta, 6)} />
        <path d="M20 52 L42 76 L96 4" {...traco(seg(f, t0 + 12, t0 + 18), COR.vermelho, 9)} />
      </svg>
      <div style={{position: 'absolute', left: 190, top: 0, height: altura, width: w + 30, display: 'flex', alignItems: 'center', fontFamily: FONTE_TEXTO, fontWeight: 700, fontSize: tam, color: COR.tinta, whiteSpace: 'nowrap', clipPath: `inset(-10% ${100 - seg(f, t0 + 4, t0 + 13) * 100}% -10% 0)`}}>{t}</div>
    </div>;
  })}</div>;
};