import { mountToolbar, type WidgetConfig } from './toolbar';

(function () {
  const cfg = (window as Record<string, unknown>).accessmateWidgetConfig as WidgetConfig | undefined;

  const config: WidgetConfig = cfg ?? {
    color:    '#7c6aff',
    position: 'bottom-right',
    features: ['font', 'contrast', 'dyslexia'],
  };

  if (config.enabled === false) return;
  if (!config.features || config.features.length === 0) return;

  const v = config.offset_vertical   ?? 15;
  const h = config.offset_horizontal ?? 15;

  const POSITIONS: Record<string, string> = {
    'bottom-right': `bottom:${v}px;right:${h}px`,
    'bottom-left':  `bottom:${v}px;left:${h}px`,
    'top-right':    `top:${v}px;right:${h}px`,
    'top-left':     `top:${v}px;left:${h}px`,
  };

  const host   = document.createElement('div');
  host.id      = 'accessmate-widget-host';
  host.style.cssText = `position:fixed;z-index:2147483647;${POSITIONS[config.position] ?? POSITIONS['bottom-right']}`;

  const shadow = host.attachShadow({ mode: 'open' });
  document.body.appendChild(host);

  mountToolbar(shadow, config);
})();