import { render } from 'preact';
import SchedulePickers from './SchedulePickers';

/**
 * Isla de los pickers de agendamiento del form de /estimate. Mismo patrón que la
 * isla de galería: busca el div target y hace return temprano si no existe (así el
 * import() dinámico desde app.js es seguro en cualquier página).
 *
 * El schedule (TZ + días + horario) llega por data-schedule (config('company.schedule'))
 * y los hidden inputs preferred_date/preferred_time ya existen en el markup — los
 * pickers los rellenan; el submit (estimate-form.js) los lee por name. Si algo
 * faltara, se cae a un no-op y los hidden vacíos harían fallar la validación (que
 * es el comportamiento correcto: sin pickers no hay fecha/hora válidas).
 */
export function initSchedulePickers() {
  const el = document.querySelector('[data-schedule-pickers]');
  if (!el) return;

  let schedule;
  try {
    schedule = JSON.parse(el.dataset.schedule || '{}');
  } catch {
    return;
  }
  if (!schedule?.timezone || !schedule?.days) return;

  const form = el.closest('form');
  const dateInput = form?.querySelector('input[name="preferred_date"]');
  const timeInput = form?.querySelector('input[name="preferred_time"]');
  if (!dateInput || !timeInput) return;

  render(
    <SchedulePickers schedule={schedule} dateInput={dateInput} timeInput={timeInput} />,
    el,
  );
}