SplitForm.tsx

/**
 * ObjectUI
 * Copyright (c) 2024-present ObjectStack Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/**
 * SplitForm Component
 * 
 * A form variant that displays sections in a resizable split-panel layout.
 * The first section renders in the left/top panel, remaining sections in the right/bottom panel.
 * Aligns with @objectstack/spec FormView type: 'split'
 */

import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react';
import type { FormField, DataSource } from '@object-ui/types';
import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
  cn,
} from '@object-ui/components';
import { FormSection } from './FormSection';
import { SchemaRenderer, useSafeFieldLabel } from '@object-ui/react';
import { buildSectionFields as buildSectionFieldsShared } from './sectionFields';
import { sectionFormLayout } from './autoLayout';

export interface SplitFormSectionConfig {
  name?: string;
  label?: string;
  description?: string;
  columns?: 1 | 2 | 3 | 4;
  fields: (string | FormField)[];
  /** Custom CSS class for the section's Card wrapper. */
  className?: string;
  /** Custom CSS class for the section's field grid. */
  gridClassName?: string;
}

export interface SplitFormSchema {
  type: 'object-form';
  formType: 'split';
  objectName: string;
  mode: 'create' | 'edit' | 'view';
  recordId?: string | number;
  sections: SplitFormSectionConfig[];
  
  /**
   * Split direction.
   * @default 'horizontal'
   */
  splitDirection?: 'horizontal' | 'vertical';
  
  /**
   * Size of the first panel (percentage 1-99).
   * @default 50
   */
  splitSize?: number;
  
  /**
   * Whether panels can be resized.
   * @default true
   */
  splitResizable?: boolean;

  // Common form props
  showSubmit?: boolean;
  submitText?: string;
  showCancel?: boolean;
  cancelText?: string;
  initialValues?: Record<string, any>;
  initialData?: Record<string, any>;
  readOnly?: boolean;
  onSuccess?: (data: any) => void | Promise<void>;
  onError?: (error: Error) => void;
  onCancel?: () => void;
  className?: string;
}

export interface SplitFormProps {
  schema: SplitFormSchema;
  dataSource?: DataSource;
  className?: string;
}

export const SplitForm: React.FC<SplitFormProps> = ({
  schema,
  dataSource,
  className,
}) => {
  const { fieldLabel } = useSafeFieldLabel();
  const [objectSchema, setObjectSchema] = useState<any>(null);
  const [formData, setFormData] = useState<Record<string, any>>({});
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  // Fetch object schema
  useEffect(() => {
    const fetchSchema = async () => {
      if (!dataSource) {
        setLoading(false);
        return;
      }
      try {
        const data = await dataSource.getObjectSchema(schema.objectName);
        setObjectSchema(data);
      } catch (err) {
        setError(err as Error);
        setLoading(false);
      }
    };
    fetchSchema();
  }, [schema.objectName, dataSource]);

  // The record whose data `formData` currently holds. The fetch effect reads it
  // to tell a genuine record SWAP from a re-run of its own making —
  // `initialData`/`initialValues` are objects callers commonly rebuild every
  // render, and flashing the loading state for those would thrash.
  const loadedRecordIdRef = useRef<string | number | undefined>(undefined);

  // Fetch initial data
  useEffect(() => {
    // A `recordId` change re-enters this effect with the form still MOUNTED on
    // the previous record, which needs handling on two fronts (pinned by
    // recordSwapLoading.test.tsx):
    //  - go back to the loading state, so record A's values are not left on
    //    screen AND EDITABLE while B is in flight, to be swapped underneath in
    //    place when it lands. Anything typed there read as A's on screen but
    //    would have been submitted against B.
    //  - ignore a response that is no longer the one being awaited, so two
    //    overlapping reads land in REQUEST order, not completion order.
    let cancelled = false;
    const fetchData = async () => {
      if (schema.mode === 'create' || !schema.recordId) {
        setFormData(schema.initialData || schema.initialValues || {});
        setLoading(false);
        return;
      }

      if (!dataSource) {
        setFormData(schema.initialData || schema.initialValues || {});
        setLoading(false);
        return;
      }

      // Only a change of RECORD hides the form.
      if (loadedRecordIdRef.current !== schema.recordId) setLoading(true);

      try {
        const data = await dataSource.findOne(schema.objectName, schema.recordId);
        if (cancelled) return;
        loadedRecordIdRef.current = schema.recordId;
        setFormData(data || {});
      } catch (err) {
        if (cancelled) return;
        setError(err as Error);
      } finally {
        if (!cancelled) setLoading(false);
      }
    };

    if (objectSchema || !dataSource) {
      fetchData();
    }
    return () => { cancelled = true; };
  }, [objectSchema, schema.mode, schema.recordId, schema.initialData, schema.initialValues, dataSource, schema.objectName]);

  // Build form fields from section config
  const buildSectionFields = useCallback(
    (section: SplitFormSectionConfig): FormField[] =>
      buildSectionFieldsShared(section as any, {
        objectSchema,
        objectName: schema.objectName,
        readOnly: schema.readOnly,
        mode: schema.mode,
        fieldLabel,
      }),
    [objectSchema, schema.readOnly, schema.mode, schema.objectName, fieldLabel],
  );

  // Handle form submission
  const handleSubmit = useCallback(async (data: Record<string, any>) => {
    if (!dataSource) {
      if (schema.onSuccess) {
        await schema.onSuccess(data);
      }
      return data;
    }

    try {
      let result;
      if (schema.mode === 'create') {
        result = await dataSource.create(schema.objectName, data);
      } else if (schema.mode === 'edit' && schema.recordId) {
        result = await dataSource.update(schema.objectName, schema.recordId, data);
      }
      if (schema.onSuccess) {
        await schema.onSuccess(result);
      }
      return result;
    } catch (err) {
      if (schema.onError) {
        schema.onError(err as Error);
      }
      throw err;
    }
  }, [schema, dataSource]);

  // Handle cancel
  const handleCancel = useCallback(() => {
    if (schema.onCancel) {
      schema.onCancel();
    }
  }, [schema]);

  // Split sections: first section in panel 1, rest in panel 2
  const leftSections = useMemo(() => schema.sections.slice(0, 1), [schema.sections]);
  const rightSections = useMemo(() => schema.sections.slice(1), [schema.sections]);

  // Collect all fields for a unified form submission
  const allFields: FormField[] = useMemo(
    () => schema.sections.flatMap(section => buildSectionFields(section)),
    [schema.sections, buildSectionFields]
  );

  const direction = schema.splitDirection || 'horizontal';
  const panelSize = schema.splitSize || 50;

  if (error) {
    return (
      <div className="p-4 border border-red-300 bg-red-50 rounded-md">
        <h3 className="text-red-800 font-semibold">Error loading form</h3>
        <p className="text-red-600 text-sm mt-1">{error.message}</p>
      </div>
    );
  }

  if (loading) {
    return (
      <div className="p-8 text-center">
        <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
        <p className="mt-2 text-sm text-gray-600">Loading form...</p>
      </div>
    );
  }

  // Build base form schema for SchemaRenderer
  const baseFormSchema = {
    type: 'form' as const,
    objectName: schema.objectName,
    layout: 'vertical' as const,
    defaultValues: formData,
    onSubmit: handleSubmit,
    onCancel: handleCancel,
  };

  const renderSections = (sections: SplitFormSectionConfig[], showButtons: boolean) => (
    <div className="space-y-6 p-4">
      {sections.map((section, index) => (
        <FormSection
          key={section.name || section.label || index}
          label={section.label}
          description={section.description}
          columns={1}
          className={section.className}
          gridClassName={section.gridClassName}
        >
          <SchemaRenderer
            schema={{
              ...baseFormSchema,
              // Multi-column lives on the field container inside the form, not
              // as a grid wrapped around the whole form (which leaves the extra
              // columns empty). See sectionFormLayout.
              ...sectionFormLayout(buildSectionFields(section), section.columns || 1),
              showSubmit: showButtons && schema.showSubmit !== false && schema.mode !== 'view',
              showCancel: showButtons && schema.showCancel !== false,
              submitLabel: schema.submitText || (schema.mode === 'create' ? 'Create' : 'Update'),
              cancelLabel: schema.cancelText,
            }}
          />
        </FormSection>
      ))}
    </div>
  );

  return (
    <div className={cn('w-full', className, schema.className)}>
      <ResizablePanelGroup orientation={direction as 'horizontal' | 'vertical'} className="min-h-[300px] rounded-lg border">
        {/* Left / Top Panel */}
        <ResizablePanel defaultSize={panelSize} minSize={20}>
          {renderSections(leftSections, rightSections.length === 0)}
        </ResizablePanel>

        {rightSections.length > 0 && (
          <>
            <ResizableHandle withHandle={schema.splitResizable !== false} />

            {/* Right / Bottom Panel */}
            <ResizablePanel defaultSize={100 - panelSize} minSize={20}>
              {renderSections(rightSections, true)}
            </ResizablePanel>
          </>
        )}
      </ResizablePanelGroup>
    </div>
  );
};

export default SplitForm;