'use client';
import { LoadingSpinner } from '../common/spinner';
import {
  BackButton,
  ClientsGrid,
  DateTimeSelect,
  MastersGrid,
  NextButton,
  ServiceSelect,
} from './components';
import { OrderStoreProvider, useOrderStore } from '@/stores/order';
import { useInitOrderStore } from '@/stores/order/hooks';
import { withContext } from '@/utils/context';
import { type JSX } from 'react';

const STEP_COMPONENTS: Record<string, JSX.Element> = {
  'client-select': <ClientsGrid />,
  'datetime-select': <DateTimeSelect />,
  'master-select': <MastersGrid />,
  'service-select': <ServiceSelect />,
};

export const OrderForm = withContext(OrderStoreProvider)(function () {
  useInitOrderStore();

  const step = useOrderStore((store) => store.step);
  if (step === 'loading') return <LoadingSpinner />;

  return (
    <div className="space-y-4 [&>*]:px-4">
      {getStepComponent(step)}
      <div className="space-y-2">
        <NextButton />
        <BackButton />
      </div>
    </div>
  );
});

function getStepComponent(step: string) {
  return STEP_COMPONENTS[step] ?? null;
}