/* The Upper Room — Alerts / notifications (LinkedIn Notifications reskinned). */
const { useState: useAlertsState, useContext: useAlertsContext } = React;

function findPostById(id) {
  const all = [].concat(typeof MY_POSTS !== 'undefined' ? MY_POSTS : [], typeof FEED_POSTS !== 'undefined' ? FEED_POSTS : []);
  return all.filter((p) => p.id === id)[0] || null;
}

function AlertRow({ alert, onNav }) {
  const room = useAlertsContext(window.RoomContext);
  const guard = !room.canEngage;
  const [acted, setActed] = useAlertsState(false);

  const route = () => {
    const t = alert.target;
    if (!t) return;
    if (t.post) { const p = findPostById(t.post); if (p) room.openPost(p); }
    else if (t.ministry) room.openProfile({ name: t.ministry, kind: 'ministry' });
    else if (t.profile) room.openProfile({ name: t.profile, from: t.from, church: t.church });
  };

  return (
    <div className={'ur-alert' + (alert.unread ? ' unread' : '')} onClick={route}>
      {alert.unread && <span className="ur-alert-dot" aria-hidden="true"></span>}
      {alert.person ? (
        <Avatar name={alert.person} onClick={(e) => { e.stopPropagation(); room.openProfile({ name: alert.person, from: alert.target && alert.target.from, church: alert.target && alert.target.church }); }} style={{ cursor: 'pointer' }} />
      ) : (
        <div className={'ur-alert-icon k-' + alert.kind}><Icon name={alert.icon || 'bell'} size={20} /></div>
      )}
      <div className="ur-alert-main">
        <div className="ur-alert-text"><b>{alert.name}</b> {alert.rest}</div>
        {alert.excerpt && <div className="ur-alert-excerpt">{alert.excerpt}</div>}
        {alert.action && (
          <button className={'ur-alert-action' + (acted ? ' done' : '')} onClick={(e) => { e.stopPropagation(); if (guard) { room.promptComplete(); return; } setActed(!acted); }}>
            <Icon name={acted ? 'check' : (alert.action === 'Accept' ? 'user-plus' : (alert.action === 'Follow' ? 'plus' : 'user-plus'))} size={14} />
            {acted ? (alert.action === 'Accept' ? 'In your circle' : (alert.action === 'Follow' ? 'Following' : 'Pending')) : alert.action}
          </button>
        )}
      </div>
      <div className="ur-alert-side">
        <span className="ur-alert-time">{alert.time}</span>
        <button className="ur-alert-more" onClick={(e) => e.stopPropagation()} aria-label="More"><Icon name="ellipsis" size={16} /></button>
      </div>
    </div>
  );
}

function AlertsPage({ onNav }) {
  const [filter, setFilter] = useAlertsState('all');
  const tabs = [
    { id: 'all', label: 'All' },
    { id: 'amen', label: 'Amens' },
    { id: 'comment', label: 'Comments' },
    { id: 'invite', label: 'Invitations' },
  ];
  const shown = ALERTS.filter((a) => filter === 'all' ? true : a.kind === filter);

  return (
    <div className="ur-shell ur-shell-circle">
      <LeftRail />
      <main className="ur-center">
        <div className="card ur-alert-tabs">
          {tabs.map((t) => (
            <button key={t.id} className={'ur-alert-tab' + (filter === t.id ? ' active' : '')} onClick={() => setFilter(t.id)}>{t.label}</button>
          ))}
        </div>
        <div className="card ur-alert-list">
          {shown.length ? shown.map((a) => <AlertRow key={a.id} alert={a} onNav={onNav} />)
            : <div className="ur-alert-empty">Nothing here yet. When believers gather around your words, you’ll see it here. ✝</div>}
        </div>
      </main>
    </div>
  );
}

Object.assign(window, { AlertsPage });