/* Capture: Anything else.
 *
 * Post-chrome: tag chips (Decision / Observation / Idea / FYI / Win) and
 * an optional inline member tagger. Tag is single-select; tapping the
 * active tag clears it.
 */
(function () {
  const { useState, useEffect } = React;
  const { CaptureFlow, MemberPicker, tokens } = window.CC;

  const TAGS = [
    { value: "decision", label: "Decision" },
    { value: "observation", label: "Observation" },
    { value: "idea", label: "Idea" },
    { value: "fyi", label: "FYI" },
    { value: "win", label: "Win" },
  ];

  function CaptureNote({ open, onClose, onSaved }) {
    const [tag, setTag] = useState(null);
    const [tagged, setTagged] = useState([]); // member chips
    const [showTagger, setShowTagger] = useState(false);

    useEffect(() => {
      if (open) {
        setTag(null);
        setTagged([]);
        setShowTagger(false);
      }
    }, [open]);

    return (
      <CaptureFlow
        open={open}
        onClose={onClose}
        type="note"
        title="Anything else"
        placeholder="What’s on your mind?"
        postChrome={
          <div style={{ display: "grid", gap: 16 }}>
            <div>
              <div className="cc-toggle-row__label">Tag</div>
              <div className="cc-tag-row">
                {TAGS.map((t) => (
                  <button
                    type="button"
                    key={t.value}
                    onClick={() => setTag((cur) => (cur === t.value ? null : t.value))}
                    className={`cc-tag ${tag === t.value ? "is-active" : ""}`}
                  >
                    {t.label}
                  </button>
                ))}
              </div>
            </div>
            {!showTagger ? (
              <button
                type="button"
                onClick={() => setShowTagger(true)}
                className="cc-add-link"
              >
                + tag a member
              </button>
            ) : (
              <MemberPicker
                label="Tagged members"
                multi
                value={tagged}
                onChange={setTagged}
                autoFocus
              />
            )}
          </div>
        }
        extraEntryFields={() => ({
          tag,
          members: tagged.map((m) => m.row_id),
        })}
        onSaved={onSaved}
      />
    );
  }

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