import { GLYPH_FILL_FROM_TAB } from '../glyphs';

export interface FillFromTabOpts {
  sendMessage: (msg: { type: 'get_active_tab_url' }) => Promise<{ ok: boolean; data?: { url: string; title: string } | null }>;
}

export function wireFillFromTab(form: HTMLElement, opts: FillFromTabOpts): void {
  const btn = form.querySelector<HTMLButtonElement>('#fill-from-tab-btn');
  if (!btn) return;
  btn.addEventListener('click', async () => {
    const resp = await opts.sendMessage({ type: 'get_active_tab_url' });
    if (!resp.ok || !resp.data) {
      btn.disabled = true;
      btn.title = 'no active tab';
      return;
    }
    const urlEl = form.querySelector<HTMLInputElement>('#f-url');
    const titleEl = form.querySelector<HTMLInputElement>('#f-title');
    if (urlEl) urlEl.value = resp.data.url;
    if (titleEl && !titleEl.value.trim()) titleEl.value = resp.data.title;
  });
}

export const FILL_FROM_TAB_BTN_HTML = `<button id="fill-from-tab-btn" class="glyph-btn" type="button" title="fill from active tab">${GLYPH_FILL_FROM_TAB}</button>`;