const { Board, Lane, Banner, StatusDot } = window.EquestrianismDesignSystem_6b57f9;

const SC = ({ t, m, go }) => (
  <button type="button" className="sess-card" onClick={() => go && go('sessions')}>
    <b>{t}</b><span className="m">{m}</span>
  </button>
);

function BoardPage({ go }) {
  const [doneCount, setDoneCount] = React.useState(2);
  return (
    <div className="stack">
      <window.PageHead title="Board"
        sub="Every session, ordered by how much it wants a person."
        end={<StatusDot state="running" pulse>3 live</StatusDot>} />
      <Banner state="needs-input" action={<a href="#answer" onClick={(e) => { e.preventDefault(); go('sessions'); }}>Answer</a>}>
        <strong>Weekly shop</strong> needs your input — a question about substitutions.
      </Banner>
      <Board>
        <Lane title="Queued" state="queued" count={2}>
          <SC go={go} t="Renew library books" m="waiting · routine" />
          <SC go={go} t="Plan half-term" m="waiting · manual" />
        </Lane>
        <Lane title="Running" state="running" count={1}>
          <SC go={go} t="Boiler service research" m="8m · $0.32 so far" />
        </Lane>
        <Lane title="Needs input" state="needs-input" count={1}>
          <SC go={go} t="Weekly shop" m="asked a question · 22m ago" />
        </Lane>
        <Lane title="Needs review" state="needs-review" count={2}>
          <SC go={() => go('approvals')} t="Email the plumber" m="wants to send · gated" />
          <SC go={() => go('approvals')} t="Cancel subscription" m="wants to submit a form" />
        </Lane>
        <Lane title="Done" state="done" count={9} empty="Nothing settled today."
          onLoadMore={() => setDoneCount(doneCount + 2)}>
          <SC go={go} t="School-run rota" m="settled · 08:12" />
          <SC go={go} t="Meter readings" m="settled · 07:40" />
          {doneCount > 2 && <SC go={go} t="Bin day reminder" m="settled · yesterday" />}
          {doneCount > 2 && <SC go={go} t="Term dates to calendar" m="settled · yesterday" />}
        </Lane>
      </Board>
    </div>
  );
}
window.BoardPage = BoardPage;