// File Path: monorepo/web/frontend/src/pages/Admin/Event/Virtual/Add/Step1Page.jsx

import React, { useMemo } from "react";
import { useVirtualEventWizardStorage } from "../../../../../services/Services";
import { EventStep1Component } from "../../../../../components/business/events";
import { ComputerDesktopIcon } from "@heroicons/react/24/outline";
import { EVENT_TYPE_VIRTUAL } from "../../../../../constants/Event";

// Virtual event type configuration
const virtualConfig = {
  eventType: EVENT_TYPE_VIRTUAL,
  labels: {
    wizardTitle: "Add New Virtual Event",
    eventTypeName: "Virtual Event",
    backToList: "Back to Virtual Events",
  },
  icons: {
    wizard: ComputerDesktopIcon,
  },
  routes: {
    list: "/admin/events/virtuals",
    step1: "/admin/events/virtuals/add/step-1",
    step2: "/admin/events/virtuals/add/step-2",
    step3: "/admin/events/virtuals/add/step-3",
    step4: "/admin/events/virtuals/add/step-4",
  },
};

function AdminEventVirtualAddStep1Page() {
  const virtualEventWizardStorage = useVirtualEventWizardStorage();

  // Wrapper for Virtual storage to match the generic interface - memoized to prevent re-renders
  const wrappedStorage = useMemo(
    () => ({
      getWizardData: () => virtualEventWizardStorage.getVirtualEventWizard(),
      saveWizardData: (data) =>
        virtualEventWizardStorage.saveVirtualEventWizard(data),
      clearWizardData: () =>
        virtualEventWizardStorage.clearVirtualEventWizard(),
    }),
    [],
  );

  return (
    <EventStep1Component
      wizardStorage={wrappedStorage}
      eventTypeConfig={virtualConfig}
    />
  );
}

export default AdminEventVirtualAddStep1Page;
