// app-item.jsx — ItemCard: one agenda item's note form
(function () {
  const { useState } = React;
  const { STATUSES, PRESENTERS } = window.MeetingData;

  function uid() { return "a_" + Math.random().toString(36).slice(2, 9); }

  function VoteTally({ vote, onChange }) {
    function set(field, val) {
      const v = val.replace(/[^0-9]/g, "");
      onChange(Object.assign({}, vote, { [field]: v }));
    }
    return (
      <div className="vote">
        {[["for", "For"], ["against", "Against"], ["abstain", "Abstain"]].map(([f, label]) => (
          <label key={f} className="vote__cell">
            <span className="vote__label">{label}</span>
            <input
              className="vote__input"
              inputMode="numeric"
              value={vote[f]}
              onChange={(e) => set(f, e.target.value)}
              placeholder="0"
            />
          </label>
        ))}
        <button
          type="button"
          className="vote__clear"
          title="Clear roll-call tally"
          onClick={() => onChange({ recorded: false, for: "", against: "", abstain: "" })}
        >
          Remove tally
        </button>
      </div>
    );
  }

  function ItemCard({ item, index, active, onPatch, onRegister }) {
    const [showVote, setShowVote] = useState(item.vote.recorded);

    function patch(changes) { onPatch(item.id, changes); }

    function addAction() {
      patch({ actions: item.actions.concat([{ id: uid(), text: "", owner: "", due: "" }]) });
    }
    function patchAction(id, changes) {
      patch({ actions: item.actions.map((a) => (a.id === id ? Object.assign({}, a, changes) : a)) });
    }
    function removeAction(id) {
      patch({ actions: item.actions.filter((a) => a.id !== id) });
    }

    const filled =
      (item.notes && item.notes.trim()) ||
      item.status ||
      item.vote.recorded ||
      item.actions.length;
    const lvl = item.level || (item.isSub ? 1 : 0);

    return (
      <article
        className={"item item--lvl" + lvl + (filled ? " item--filled" : "")}
        id={"item-" + item.id}
        ref={(el) => onRegister && onRegister(item.id, el)}
        data-screen-label={"Item " + (item.number || item.title.slice(0, 20))}
      >
        <header className="item__head">
          {item.number
            ? <span className="item__num">{item.number}</span>
            : <span className="item__num item__num--bullet" aria-hidden="true"></span>}
          <input
            className="item__title"
            value={item.title}
            onChange={(e) => patch({ title: e.target.value })}
            placeholder="Agenda item"
          />
          <div className="item__meta">
            <label className="pagefield" title="Reference page(s) in the board packet">
              <span className="pagefield__hash">p.</span>
              <input
                className="pagefield__input"
                value={item.page}
                onChange={(e) => patch({ page: e.target.value })}
                placeholder="—"
              />
            </label>
            <label className="presenter">
              <span className="presenter__by">by</span>
              <input
                className="presenter__input"
                list="presenter-list"
                value={item.presenter}
                onChange={(e) => patch({ presenter: e.target.value })}
                placeholder="presenter"
              />
            </label>
          </div>
        </header>

        <window.NotesEditor
          value={item.notes}
          onChange={(v) => patch({ notes: v })}
        />

        <div className="item__controls">
          <div className="status">
            <span className="status__label">Decision</span>
            <div className="status__opts" role="group" aria-label="Decision status">
              {STATUSES.map((s) => (
                <button
                  key={s.key}
                  type="button"
                  className={"status__btn" + (item.status === s.key ? " is-on status__btn--" + s.key : "")}
                  onClick={() => patch({ status: item.status === s.key ? "" : s.key })}
                >
                  {s.label}
                </button>
              ))}
            </div>
          </div>

          {!showVote ? (
            <button
              type="button"
              className="ghost-btn"
              onClick={() => { setShowVote(true); patch({ vote: Object.assign({}, item.vote, { recorded: true }) }); }}
            >
              + Record vote
            </button>
          ) : (
            <VoteTally
              vote={item.vote}
              onChange={(v) => { patch({ vote: v }); if (!v.recorded) setShowVote(false); }}
            />
          )}
        </div>

        <div className="actions">
          <div className="actions__head">
            <span className="actions__label">Action items</span>
            <button type="button" className="ghost-btn ghost-btn--sm" onClick={addAction}>+ Add</button>
          </div>
          {item.actions.length > 0 && (
            <ul className="actions__list">
              {item.actions.map((a) => (
                <li key={a.id} className="action">
                  <span className="action__bullet" aria-hidden="true"></span>
                  <input
                    className="action__text"
                    value={a.text}
                    onChange={(e) => patchAction(a.id, { text: e.target.value })}
                    placeholder="Task to be done"
                  />
                  <input
                    className="action__owner"
                    value={a.owner}
                    onChange={(e) => patchAction(a.id, { owner: e.target.value })}
                    placeholder="Owner"
                  />
                  <input
                    className="action__due"
                    type="date"
                    value={a.due}
                    onChange={(e) => patchAction(a.id, { due: e.target.value })}
                  />
                  <button
                    type="button"
                    className="action__del"
                    title="Remove"
                    onClick={() => removeAction(a.id)}
                  >×</button>
                </li>
              ))}
            </ul>
          )}
        </div>
      </article>
    );
  }

  window.ItemCard = ItemCard;
})();