/* Capture: Member update.
 *
 * Pre-chrome: member picker. Post-chrome: needs-followup toggle.
 * On save, member ID is attached to the entry's `members` array.
 */
(function () {
  const { useState, useEffect } = React;
  const { CaptureFlow, MemberPicker, tokens } = window.CC;

  function CaptureMember({ open, onClose, prefilledMember = null, onSaved }) {
    const [member, setMember] = useState(prefilledMember || null);
    const [followup, setFollowup] = useState(false);

    useEffect(() => {
      if (open) {
        setMember(prefilledMember || null);
        setFollowup(false);
      }
    }, [open, prefilledMember]);

    return (
      <CaptureFlow
        open={open}
        onClose={onClose}
        type="member"
        title="Member update"
        placeholder="What changed for this member?"
        memberName={member?.name}
        canSave={({ text, transcript }) =>
          Boolean(member) && Boolean((text || transcript || "").trim())
        }
        preChrome={
          <MemberPicker value={member} onChange={setMember} />
        }
        postChrome={
          <label className="cc-toggle-row">
            <input
              type="checkbox"
              checked={followup}
              onChange={(e) => setFollowup(e.target.checked)}
            />
            <span>Needs follow-up</span>
            <span
              style={{
                color: tokens.colors.textDim,
                fontSize: 13,
                marginLeft: "auto",
              }}
            >
              flags this for Attention
            </span>
          </label>
        }
        extraEntryFields={() => ({
          members: member ? [member.row_id] : [],
          needs_followup: followup,
        })}
        onSaved={onSaved}
      />
    );
  }

  window.CC = window.CC || {};
  window.CC.CaptureMember = CaptureMember;
})();