Select

import { DashForm } from '@dashforge/forms';
import { Select } from '@dashforge/ui';

function PreferencesForm() {
  const handleSubmit = (data: FormData) => {
    console.log('Submitted:', data);
  };

  return (
    <DashForm
      defaultValues={{ country: '', language: '' }}
      onSubmit={handleSubmit}
      mode="onBlur"
    >
      <Select
        name="country"
        label="Country"
        rules={{ required: 'Please select a country' }}
        options={[
          { value: 'us', label: 'United States' },
          { value: 'uk', label: 'United Kingdom' },
          { value: 'ca', label: 'Canada' },
        ]}
      />
      
      <Select
        name="language"
        label="Language"
        rules={{ required: 'Please select a language' }}
        options={[
          { value: 'en', label: 'English' },
          { value: 'es', label: 'Spanish' },
          { value: 'fr', label: 'French' },
        ]}
      />
      
      <button type="submit">Submit</button>
    </DashForm>
  );
}

// Select automatically:
// - Registers with React Hook Form
// - Syncs value from form state
// - Displays validation errors when touched
// - Tracks dirty/touched state

import { DashForm } from '@dashforge/forms';
import { Select, TextField } from '@dashforge/ui';

function ShippingForm() {
  return (
    <DashForm defaultValues={{ shippingMethod: '', deliveryDate: '' }}>
      <Select
        name="shippingMethod"
        label="Shipping Method"
        options={[
          { value: 'standard', label: 'Standard (5-7 days)' },
          { value: 'express', label: 'Express (2-3 days)' },
          { value: 'overnight', label: 'Overnight' },
        ]}
      />

      {/* Delivery date: visible only for express/overnight */}
      <TextField
        name="deliveryDate"
        label="Preferred Delivery Date"
        type="date"
        rules={{ required: 'Date is required' }}
        visibleWhen={(engine) => {
          const node = engine.getNode('shippingMethod');
          return node?.value === 'express' || node?.value === 'overnight';
        }}
      />

      {/* Special instructions: visible only for overnight */}
      <TextField
        name="specialInstructions"
        label="Special Instructions"
        multiline
        rows={3}
        visibleWhen={(engine) => {
          const node = engine.getNode('shippingMethod');
          return node?.value === 'overnight';
        }}
      />
    </DashForm>
  );
}

// The Engine API provides:
// - getNode(name): Access any field's state
// - Reactive updates: Components re-render on dependency changes
// - Type-safe predicates: Full TypeScript support

import { DashForm } from '@dashforge/forms';
import { Select } from '@dashforge/ui';

interface City {
  cityId: string;
  cityName: string;
  countryCode: string;
}

const MOCK_CITIES: City[] = [
  { cityId: 'nyc', cityName: 'New York', countryCode: 'us' },
  { cityId: 'tor', cityName: 'Toronto', countryCode: 'ca' },
  { cityId: 'lon', cityName: 'London', countryCode: 'uk' },
  // ...more cities
];

function LocationForm() {
  return (
    <DashForm
      defaultValues={{ country: '', city: '' }}
      reactions={[
        {
          id: 'load-cities',
          watch: ['country'],
          when: (ctx) => ctx.getValue('country') !== '',
          run: async (ctx) => {
            const country = ctx.getValue<string>('country');
            
            // Set loading state
            ctx.setRuntime('city', { 
              status: 'loading',
              data: null 
            });
            
            // Simulate API call
            await new Promise(resolve => setTimeout(resolve, 800));
            
            // Filter cities by country
            const cities = MOCK_CITIES.filter(
              c => c.countryCode === country
            );
            
            // Update runtime with options
            ctx.setRuntime('city', {
              status: 'ready',
              data: { options: cities }
            });
          }
        }
      ]}
    >
      <Select
        name="country"
        label="Country"
        options={[
          { value: 'us', label: 'United States' },
          { value: 'ca', label: 'Canada' },
          { value: 'uk', label: 'United Kingdom' },
        ]}
      />

      <Select
        name="city"
        label="City"
        optionsFromFieldData="city"
        getOptionValue={(opt: City) => opt.cityId}
        getOptionLabel={(opt: City) => opt.cityName}
        visibleWhen={(engine) =>
          engine.getNode('country')?.value !== ''
        }
      />
    </DashForm>
  );
}

// Reactive V2 enables:
// - Runtime-driven options via optionsFromFieldData
// - Generic option shapes via mapper functions
// - Loading states automatically handled
// - No automatic value reset (business data responsibility)