import { useForm } from 'formlink';

interface ContactForm {
  name: string;
  email: string;
  message: string;
}

const form = useForm<ContactForm>({
  name: '',
  email: '',
  message: ''
});

// Simple submission
await form.post('/api/contact');

// Check form state
console.log(form.processing); // false
console.log(form.wasSuccessful); // true
console.log(form.errors); // {}

const form = useForm({
  username: '',
  password: ''
});

// With custom Axios instance
const customAxios = axios.create({ baseURL: '/api' });
const form = useForm(data, customAxios);

// HTTP request methods
form.get(url: string, options?: FormOptions): Promise<void>
form.post(url: string, options?: FormOptions): Promise<void>
form.put(url: string, options?: FormOptions): Promise<void>
form.patch(url: string, options?: FormOptions): Promise<void>
form.delete(url: string, options?: FormOptions): Promise<void>
form.options(url: string, options?: FormOptions): Promise<void>

// Generic submission method
form.submit(method: Method, url: string, options?: FormOptions): Promise<void>

// Debounced submission (useful for search/auto-save)
form.submitDebounced(method: Method, url: string, options?: FormOptions, debounceTime?: number): void

// Dirty field tracking
form.markFieldDirty(field: keyof T): void
form.isFieldDirty(field: keyof T): boolean
form.getDirtyFields(): Set<keyof T>
form.clearDirtyFields(): void

// State checking
form.isState(state: FormState): boolean
form.getStateSummary(): FormStateSummary

// Error management
form.setError(field: keyof T | 'formError', message: string): void
form.setErrors(errors: Partial<Record<keyof T | 'formError', string>>): void
form.clearErrors(): void
form.clearError(field: keyof T | 'formError'): void
form.hasErrors(): boolean
form.hasError(field: keyof T | 'formError'): boolean
form.getError(field: keyof T | 'formError'): string | undefined

// Reset functionality
form.reset(): void                        // Reset all fields
form.reset(...fields: (keyof T)[]): void // Reset specific fields

// Default value management
form.setDefaults(): void                                    // Set current data as defaults
form.setDefaults(field: keyof T, value: any): void        // Set single field default
form.setDefaults(fields: Partial<T>): void                 // Set multiple defaults

// Field validation
form.validateField(field: keyof T): Promise<boolean>
form.validateDirtyFields(): Promise<boolean>
form.validate(onlyDirty?: boolean): Promise<boolean>

// Data transformation before submission
form.transform(callback: (data: T) => object): Form<T>

// Serialization
form.toJSON(includeDefaults?: boolean): string
form.fromJSON(json: string, setAsDefaults?: boolean): void
form.toFormData(): FormData

// Request cancellation
form.cancel(): void

// Resource cleanup
form.dispose(): void

interface FormOptions<T> {
  resetOnSuccess?: boolean; // Reset form after success
  onBefore?: () => void; // Before submission starts
  onSuccess?: (response: AxiosResponse) => void; // On successful response
  onCanceled?: () => void; // On request cancellation
  onError?: (errors: Partial<Record<keyof T, string>>) => void; // On validation errors
  onFinish?: () => void; // After submission completes
  onProgress?: (progress: Progress) => void; // On upload progress
}

enum FormState {
  IDLE = 'idle', // Form is ready for input
  PROCESSING = 'processing', // Form is being submitted
  SUCCESS = 'success', // Last submission was successful
  ERROR = 'error', // Last submission had errors
  CANCELLED = 'cancelled' // Last submission was cancelled
}

interface Progress {
  percentage: number; // Upload percentage (0-100)
  loaded: number; // Bytes uploaded
  total: number; // Total bytes to upload
  rate?: number; // Upload rate (bytes/second)
  estimated?: number; // Estimated time remaining (seconds)
}

interface UserRegistration {
  username: string;
  email: string;
  password: string;
  confirmPassword: string;
}

const form = useForm<UserRegistration>({
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
});

// Advanced validation rules
form.rules = {
  username: [
    { validate: (value) => !!value, message: 'Username is required' },
    { validate: (value) => (value as string).length >= 3, message: 'Username must be at least 3 characters' },
    {
      validate: async (value) => {
        // Async validation - check username availability
        const response = await fetch(`/api/check-username/${value}`);
        const data = await response.json();
        return data.available;
      },
      message: 'Username is already taken'
    }
  ],
  email: [
    { validate: (value) => !!value, message: 'Email is required' },
    { validate: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value as string), message: 'Invalid email format' }
  ],
  password: [
    { validate: (value) => !!value, message: 'Password is required' },
    { validate: (value) => (value as string).length >= 8, message: 'Password must be at least 8 characters' },
    {
      validate: (value) => /(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value as string),
      message: 'Password must contain uppercase, lowercase, and number'
    }
  ],
  confirmPassword: [{ validate: (value) => value === form.password, message: 'Passwords do not match' }]
};

interface FileUploadForm {
  title: string;
  description: string;
  files: File[];
  category: string;
}

const form = useForm<FileUploadForm>({
  title: '',
  description: '',
  files: [],
  category: ''
});

const handleMultipleFiles = (e: Event) => {
  const files = Array.from((e.target as HTMLInputElement).files || []);
  form.files = files;
  form.markFieldDirty('files');
};

// Submit with progress tracking
await form.post('/api/upload', {
  onProgress: (progress) => {
    console.log(`Uploading: ${progress.percentage}%`);
    console.log(`Speed: ${(progress.rate! / 1024 / 1024).toFixed(2)} MB/s`);
    console.log(`ETA: ${progress.estimated} seconds`);
  },
  onSuccess: (response) => {
    console.log('Files uploaded:', response.data.uploadedFiles);
  }
});

interface SearchForm {
  query: string;
  filters: {
    category: string;
    dateRange: string;
    sortBy: string;
  };
}

const searchForm = useForm<SearchForm>({
  query: '',
  filters: {
    category: '',
    dateRange: '',
    sortBy: 'relevance'
  }
});

// Debounced search - only search after user stops typing for 500ms
const performSearch = () => {
  searchForm.submitDebounced(
    'get',
    '/api/search',
    {
      onSuccess: (response) => {
        // Update search results
        searchResults.value = response.data.results;
      }
    },
    500
  );
};

// Watch for changes and trigger debounced search
watch(() => searchForm.query, performSearch);
watch(() => searchForm.filters, performSearch, { deep: true });

interface ProfileForm {
  firstName: string;
  lastName: string;
  birthDate: string;
  bio: string;
  tags: string[];
}

const form = useForm<ProfileForm>({
  firstName: '',
  lastName: '',
  birthDate: '',
  bio: '',
  tags: []
});

// Transform data before submission
form.transform((data) => ({
  ...data,
  firstName: data.firstName.trim(),
  lastName: data.lastName.trim(),
  fullName: `${data.firstName.trim()} ${data.lastName.trim()}`,
  birthDate: new Date(data.birthDate).toISOString(),
  bio: data.bio.trim(),
  tags: data.tags.filter((tag) => tag.trim() !== '').map((tag) => tag.toLowerCase())
}));

const form = useForm({ data: 'value' });

let retryCount = 0;
const maxRetries = 3;

const submitWithRetry = async () => {
  try {
    await form.post('/api/endpoint', {
      onError: async (errors) => {
        if (errors.formError?.includes('Network error') && retryCount < maxRetries) {
          retryCount++;
          console.log(`Retrying... Attempt ${retryCount}/${maxRetries}`);

          // Wait before retry (exponential backoff)
          await new Promise((resolve) => setTimeout(resolve, Math.pow(2, retryCount) * 1000));

          // Retry the submission
          submitWithRetry();
        } else {
          console.error('Max retries reached or non-recoverable error');
        }
      },
      onSuccess: () => {
        retryCount = 0; // Reset retry count on success
      }
    });
  } catch (error) {
    console.error('Submission failed:', error);
  }
};

const form = useForm({
  email: '',
  preferences: {
    newsletter: false,
    notifications: true
  }
});

// Save form state to localStorage
const saveFormState = () => {
  localStorage.setItem('formDraft', form.toJSON());
};

// Restore form state from localStorage
const restoreFormState = () => {
  const saved = localStorage.getItem('formDraft');
  if (saved) {
    form.fromJSON(saved);
  }
};

// Auto-save on changes (debounced)
watch(() => form.data, saveFormState, { deep: true });

// Restore on component mount
onMounted(restoreFormState);

// Clear saved data on successful submission
await form.post('/api/submit', {
  onSuccess: () => {
    localStorage.removeItem('formDraft');
  }
});

import { useForm } from 'formlink';
import { computed, watch } from 'vue';

export function useContactForm() {
  const form = useForm({
    name: '',
    email: '',
    message: ''
  });

  const canSubmit = computed(() => form.isDirty && !form.processing && !form.hasErrors());

  const submitForm = async () => {
    const isValid = await form.validate();
    if (isValid) {
      await form.post('/api/contact');
    }
  };

  return {
    form,
    canSubmit,
    submitForm
  };
}

import { useForm } from 'formlink';
import { useMemo, useCallback } from 'react';

export function useContactForm() {
  const form = useForm({
    name: '',
    email: '',
    message: ''
  });

  const canSubmit = useMemo(
    () => form.isDirty && !form.processing && !form.hasErrors(),
    [form.isDirty, form.processing, form.errors]
  );

  const submitForm = useCallback(async () => {
    const isValid = await form.validate();
    if (isValid) {
      await form.post('/api/contact');
    }
  }, [form]);

  return {
    form,
    canSubmit,
    submitForm
  };
}