import type { Html } from './html.js';
import { htmlElementContext, type HtmlElementContext } from './store.js';

type ComponentOptions<T> = (options: { props: T; context: HtmlElementContext['get'] }) => Html;

const component = <T>(options: ComponentOptions<T>) => {
  const render = (props: T) => {
    const toHtmlElement = () => {
      const root = document.createElement('div');
      root.style.display = 'content';
      const context = htmlElementContext(root);
      const api = { context: context.get, props };
      const view = options(api);
      context.emitter.addEventListener('change', () => {
        view(root);
      });
      view(root);
      return root;
    };

    return {
      toHtmlElement,
    };
  };

  return Object.assign(render, {
    toHtmlElement: () => render({} as T).toHtmlElement(),
  });
};

export { component };