/// Typed-item add/edit form dispatcher. Each type's renderForm lives in
/// its own module under ./types/. Document stays "coming soon" until γ.

import { navigate, getState } from '../popup';
import type { Item, ItemType } from '../../shared/types';
import * as login from './types/login';
import * as secureNote from './types/secure-note';
import * as identity from './types/identity';
import * as card from './types/card';
import * as key from './types/key';
import * as totp from './types/totp';

export function renderItemForm(app: HTMLElement, mode: 'add' | 'edit'): void {
  login.teardown();   // detail-view's ticker/listener don't leak into form
  secureNote.teardown();
  identity.teardown();
  card.teardown();
  key.teardown();
  totp.teardown();
  const state = getState();
  const existing = mode === 'edit' ? state.selectedItem : null;
  const type: ItemType = existing?.type ?? state.newType ?? 'login';

  switch (type) {
    case 'login':       return login.renderForm(app, mode, existing);
    case 'secure_note': return secureNote.renderForm(app, mode, existing);
    case 'identity':    return identity.renderForm(app, mode, existing);
    case 'card':        return card.renderForm(app, mode, existing);
    case 'key':         return key.renderForm(app, mode, existing);
    case 'totp':        return totp.renderForm(app, mode, existing);
    case 'document':    return renderComingSoon(app, type);
  }
}

function renderComingSoon(app: HTMLElement, type: ItemType): void {
  app.innerHTML = `
    <div class="pad">
      <div class="detail-title" style="margin-bottom:16px;">${type.replace('_', ' ')}</div>
      <p class="muted">Editing <strong>${type}</strong> items is not available yet.</p>
      <div class="form-actions"><button class="btn" id="back-btn">back</button></div>
    </div>
  `;
  document.getElementById('back-btn')?.addEventListener('click', () => navigate('list'));
}