import { html, ref, repeat, when } from '@genesislcap/web-core';
import { AGENT_PICKER_AUTO_VALUE } from './agent-picker.constants';
const AUTO_LABEL = 'Auto';
const AUTO_HINT = 'Let the orchestrator pick the right agent for each message.';
/** @internal */
export const AgentPickerTemplate = (designSystemPrefix) => {
    const segmentedControlTag = `${designSystemPrefix}-segmented-control`;
    const segmentedItemTag = `${designSystemPrefix}-segmented-item`;
    return html `
    <div class="picker" data-effective="${(x) => x.effectiveMode}" part="picker">
      ${when((x) => x.mode === 'segmented-control', html `
          <div class="segmented-row" ${ref('segmentedRowEl')}>
            <${segmentedControlTag}
              class="segmented-control"
              appearance="primary"
              aria-label="Active agent"
              :value="${(x) => x.currentValue}"
              @change="${(x, c) => {
        const value = c.event.currentTarget.value;
        // The segmented-control re-emits 'change' on its initial value
        // sync; ignore it so we don't close the panel on open.
        if (typeof value !== 'string' || value === x.currentValue)
            return;
        x.selectByValue(value);
    }}"
            >
              <${segmentedItemTag}
                value="${AGENT_PICKER_AUTO_VALUE}"
                title="${AUTO_HINT}"
              >${AUTO_LABEL}</${segmentedItemTag}>
              ${repeat((x) => x.selectableAgents, html `
                  <${segmentedItemTag}
                    value="${(a) => a.name}"
                    title="${(a) => { var _a, _b; return (_b = (_a = a.manualSelection) === null || _a === void 0 ? void 0 : _a.hint) !== null && _b !== void 0 ? _b : ''; }}"
                  >${(a) => a.name}</${segmentedItemTag}>
                `)}
            </${segmentedControlTag}>
          </div>
        `)}
      ${when((x) => x.effectiveMode === 'select', html `
          <div class="select-fallback">
            <span class="select-label">Agent:</span>
            <select
              class="select-control"
              aria-label="Active agent"
              @change="${(x, c) => {
        const value = c.event.target.value;
        x.selectByValue(value);
    }}"
            >
              <option
                value="${AGENT_PICKER_AUTO_VALUE}"
                title="${AUTO_HINT}"
                ?selected="${(x) => x.pinnedAgentName === null}"
              >
                ${AUTO_LABEL}
              </option>
              ${repeat((x) => x.selectableAgents, html `
                  <option
                    value="${(a) => a.name}"
                    title="${(a) => { var _a, _b; return (_b = (_a = a.manualSelection) === null || _a === void 0 ? void 0 : _a.hint) !== null && _b !== void 0 ? _b : ''; }}"
                    ?selected="${(a, c) => c.parent.pinnedAgentName === a.name}"
                  >
                    ${(a) => { var _a; return ((_a = a.manualSelection) === null || _a === void 0 ? void 0 : _a.hint) ? `${a.name} — ${a.manualSelection.hint}` : a.name; }}
                  </option>
                `)}
            </select>
          </div>
        `)}
    </div>
  `;
};
