const { Icon: RbIcon, Button: RbButton } = window.IPEPNexusDesignSystem_0e390f;

function RbCapa({ p, big }) {
  return <span className={'rb-capa' + (big ? ' rb-capa--big' : '')}>{p.capa ? <img src={p.capa} alt=""></img> : <RbIcon name={rbIcon(p.cat)} size={big ? 56 : 40}></RbIcon>}</span>;
}
function RbCard({ p, onOpen }) {
  return <button className="rb-card" onClick={() => onOpen(p.id)}>
    <RbCapa p={p}></RbCapa>
    <span className="rb-card-b">
      <span className="rb-cat">{p.cat}</span>
      <span className="rb-t">{p.titulo}</span>
      <span className="rb-r">{p.resumo}</span>
      <span className="rb-meta rc-num-t">{rbBr(p.data)} · {p.autor}</span>
    </span>
    <span className="rb-more">Ler artigo<RbIcon name="arrow-right" size={16}></RbIcon></span>
  </button>;
}
const rbPub = () => rbLoad().filter(p => p.st === 'publicado').sort((a, b) => ((b.destaque ? 1 : 0) - (a.destaque ? 1 : 0)) || (a.data < b.data ? 1 : -1));

function RcBlogLista({ setPage }) {
  useRbSync(); const L = rbPub(); const [cat, setCat] = React.useState('Todos');
  const cats = ['Todos', ...rbCats().map(c => c[0]).filter(c => L.some(p => p.cat === c))];
  const F = L.filter(p => cat === 'Todos' || p.cat === cat);
  return <>
    <RcPageHero pg={{ selo: 'Blog', t: 'Conteúdos para decidir melhor', d: 'Crédito consignado, educação financeira e segurança, explicados de forma simples para servidores, aposentados e pensionistas.' }}></RcPageHero>
    <section className="rc-sec rc-sec--white"><div className="rc-wrap">
      {L.length > 0 && <div className="rc-chips" style={{ marginBottom: 24 }}>{cats.map(c => <button key={c} className="rc-chip" aria-pressed={cat === c} onClick={() => setCat(c)}>{cat === c && <RbIcon name="check" size={16}></RbIcon>}{c}</button>)}</div>}
      {F.length ? <div className="rb-grid">{F.map(p => <RbCard key={p.id} p={p} onOpen={id => setPage('blog:' + id)}></RbCard>)}</div>
        : <p className="rc-p">Nenhum artigo publicado ainda.</p>}
    </div></section>
  </>;
}

function RcBlogPost({ id, setPage }) {
  useRbSync(); const L = rbPub(); const p = L.find(x => x.id === id);
  if (!p) return <section className="rc-sec"><div className="rc-wrap"><p className="rc-p">Este artigo não está mais disponível.</p><RbButton variant="secondary" icon="arrow-left" onClick={() => setPage('blog')}>Voltar ao blog</RbButton></div></section>;
  const outros = L.filter(x => x.id !== id).slice(0, 3);
  return <>
    <section className="rc-sec rc-sec--white"><article className="rc-wrap rb-art">
      <button className="rb-back" onClick={() => setPage('blog')}><RbIcon name="arrow-left" size={18}></RbIcon>Blog</button>
      <span className="rb-cat">{p.cat}</span>
      <h1 className="rc-h1 rb-h1">{p.titulo}</h1>
      <p className="rc-lead" style={{ color: 'var(--ipep-text-secondary)' }}>{p.resumo}</p>
      <div className="rb-meta rc-num-t" style={{ marginBottom: 24 }}>{rbBr(p.data)} · {p.autor} · {rbMin(p.corpo)} min de leitura</div>
      <RbCapa p={p} big></RbCapa>
      <RbBody corpo={p.corpo} imgs={p.imgs} onNav={x => x === 'login' ? (window.__rcGo && window.__rcGo('login')) : setPage(x)}></RbBody>
    </article></section>
    {outros.length > 0 && <section className="rc-sec"><div className="rc-wrap"><h2 className="rc-h2">Leia também</h2><div className="rb-grid">{outros.map(o => <RbCard key={o.id} p={o} onOpen={x => setPage('blog:' + x)}></RbCard>)}</div></div></section>}
  </>;
}

function RcBlogHome({ setPage }) {
  useRbSync(); const L = rbPub().slice(0, 3);
  if (!L.length) return null;
  return <section className="rc-sec"><div className="rc-wrap">
    <div className="rb-home-h"><div><span className="rc-seal">Blog</span><h2 className="rc-h2" style={{ margin: 0 }}>Últimos conteúdos</h2></div>
      <button className="rc-strip-link" onClick={() => setPage('blog')}>Ver todos os artigos<RbIcon name="arrow-right" size={18}></RbIcon></button></div>
    <div className="rb-grid">{L.map(p => <RbCard key={p.id} p={p} onOpen={id => setPage('blog:' + id)}></RbCard>)}</div>
  </div></section>;
}

Object.assign(window, { RcBlogLista, RcBlogPost, RcBlogHome });