---
import { generateSafeId } from '@clerk/astro/internal';
import type { InternalUIComponentId } from '../../types';

interface Props {
  [key: string]: unknown;
  id?: string;
  component: InternalUIComponentId;
}

const { component, id, ...props } = Astro.props;

const safeId = id || generateSafeId();
---

<div data-clerk-id={`clerk-${component}-${safeId}`}></div>

<script is:inline define:vars={{ props, component, safeId }}>
  /**
   * Store the id and the props for the Astro component in order to mount the correct UI component once clerk is loaded.
   * The above is handled by `mountAllClerkAstroJSComponents`.
   */
  const setOrCreatePropMap = ({ category, id, props }) => {
    if (!window.__astro_clerk_component_props) {
      window.__astro_clerk_component_props = new Map();
    }

    if (!window.__astro_clerk_component_props.has(category)) {
      const _ = new Map();
      _.set(id, props);
      window.__astro_clerk_component_props.set(category, _);
    }

    window.__astro_clerk_component_props.get(category)?.set(id, props);
  };

  setOrCreatePropMap({
    category: component,
    id: `clerk-${component}-${safeId}`,
    props,
  });
</script>