import { onMount } from "solid-js";

import CreateUserModal from "./create-user-modal.jsx";
import DeleteUserModal from "./delete-user-modal.jsx";
import UserSettingsModal from "./user-settings-modal.jsx";
import CreateDeviceModal from "./create-device-modal.jsx";
import ShowRegistrationCodeModal from "./show-registration-code-modal.jsx";
import DeleteIntegrationModal from "./delete-integration-modal.jsx";
import CreateCommandModal from "./create-command-modal.jsx";
import DeleteCommandModal from "./delete-command-modal.jsx";
import CreateRemoteModal from "./create-remote-modal.jsx";
import DeleteRemoteModal from "./delete-remote-modal.jsx";
import ImportCommandsModal from "./import-commands-modal.jsx";
import EditCommandModal from "./edit-command-modal.jsx";

const ModalRegistry = (function () {
  const modals = [
    {
      id: "createUserModal",
      component: CreateUserModal,
      ref: null,
    },
    {
      id: "deleteUserModal",
      component: DeleteUserModal,
      ref: null,
    },
    {
      id: "userSettingsModal",
      component: UserSettingsModal,
      ref: null,
    },
    {
      id: "createDeviceModal",
      component: CreateDeviceModal,
      ref: null,
    },
    {
      id: "showRegistrationCodeModal",
      component: ShowRegistrationCodeModal,
      ref: null,
    },
    {
      id: "deleteIntegrationModal",
      component: DeleteIntegrationModal,
      ref: null,
    },
    {
      id: "newCommandModal",
      component: CreateCommandModal,
      ref: null,
    },
    {
      id: "deleteCommandModal",
      component: DeleteCommandModal,
      ref: null,
    },
    {
      id: "createRemoteModal",
      component: CreateRemoteModal,
      ref: null,
    },
    {
      id: "deleteRemoteModal",
      component: DeleteRemoteModal,
      ref: null,
    },
    {
      id: "importCommandsModal",
      component: ImportCommandsModal,
      ref: null,
    },
    {
      id: "editCommandModal",
      component: EditCommandModal,
      ref: null,
    },
  ];

  function getModals(props) {
    return function () {
      onMount(() => {
        modals.forEach((modal) => {
          modal.component.Handler.setRef(modal.ref);
          modal.component.Handler.setModalId(modal.id);
        });
      });
      return (
        <>
          <For each={modals}>
            {(modal) => <modal.component ref={modal.ref} />}
          </For>
        </>
      );
    };
  }

  return {
    getModals,
  };
})();

export default ModalRegistry;