import FormInputBasicDemo from "../../../src/components/form-input-basic-demo.tsx";
import FormInputValidationDemo from "../../../src/components/form-input-validation-demo.tsx";
import FormTextareaBasicDemo from "../../../src/components/form-textarea-basic-demo.tsx";
import FormCheckboxBasicDemo from "../../../src/components/form-checkbox-basic-demo.tsx";
import FormMixedDemo from "../../../src/components/form-mixed-demo.tsx";

## Overview

Form components are pre-built wrappers that combine Field components with Input, Textarea, and Checkbox controls, integrated with react-hook-form's Controller. They provide a quick way to build forms with consistent styling, validation, and error handling out of the box.

These components are ideal for simple to medium complexity forms. For more complex scenarios (like radio groups or custom controls), use the Field components directly with react-hook-form's Controller.

## Import

```tsx
import { FormInput, FormTextarea, FormCheckbox } from "@px-ui/forms";
```

## Usage

### FormInput

Basic text input with label and description.

<Preview>
  <FormInputBasicDemo />
</Preview>

```tsx
import { FormInput } from "@px-ui/forms";
import { useForm } from "react-hook-form";
import { Button } from "@px-ui/core";

interface FormData {
  email: string;
  username: string;
}

export default function Example() {
  const { control, handleSubmit } = useForm<FormData>({
    defaultValues: {
      email: "",
      username: "",
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Form submitted:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <FormInput
        control={control}
        name="email"
        label="Email"
        description="Enter your email address"
        placeholder="you@example.com"
      />
      <FormInput
        control={control}
        name="username"
        label="Username"
        description="Choose a unique username"
        placeholder="Enter username"
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}
```

## Examples

### With Validation

Form inputs automatically show validation errors from react-hook-form. Mark fields as required with the `required` prop to add a visual indicator.

<Preview>
  <FormInputValidationDemo />
</Preview>

```tsx
import { FormInput } from "@px-ui/forms";
import { useForm } from "react-hook-form";
import { Button } from "@px-ui/core";

interface FormData {
  email: string;
  age: string;
}

export default function Example() {
  const { control, handleSubmit } = useForm<FormData>({
    defaultValues: {
      email: "",
      age: "",
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Form submitted:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <FormInput
        control={control}
        name="email"
        label="Email"
        description="We'll never share your email"
        placeholder="Enter your email address"
        required
      />
      <FormInput
        control={control}
        name="age"
        label="Age"
        description="Must be 18 or older"
        placeholder="Enter your age"
        required
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}
```

### FormTextarea

Multi-line text input for longer content.

<Preview>
  <FormTextareaBasicDemo />
</Preview>

```tsx
import { FormTextarea } from "@px-ui/forms";
import { useForm } from "react-hook-form";
import { Button } from "@px-ui/core";

interface FormData {
  message: string;
  feedback: string;
}

export default function Example() {
  const { control, handleSubmit } = useForm<FormData>({
    defaultValues: {
      message: "",
      feedback: "",
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Form submitted:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <FormTextarea
        control={control}
        name="message"
        label="Message"
        description="Enter your message"
        placeholder="Type your message here..."
      />
      <FormTextarea
        control={control}
        name="feedback"
        label="Feedback"
        description="Your feedback helps us improve"
        placeholder="Share your thoughts and suggestions"
        required
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}
```

### FormCheckbox

Checkbox input with horizontal layout by default.

<Preview>
  <FormCheckboxBasicDemo />
</Preview>

```tsx
import { FormCheckbox } from "@px-ui/forms";
import { useForm } from "react-hook-form";
import { Button } from "@px-ui/core";

interface FormData {
  acceptTerms: boolean;
  newsletter: boolean;
  notifications: boolean;
}

export default function Example() {
  const { control, handleSubmit } = useForm<FormData>({
    defaultValues: {
      acceptTerms: false,
      newsletter: false,
      notifications: false,
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Form submitted:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <FormCheckbox
        control={control}
        name="acceptTerms"
        label="Accept terms and conditions"
        description="You must accept the terms to continue"
        required
      />
      <FormCheckbox
        control={control}
        name="newsletter"
        label="Subscribe to newsletter"
        description="Receive weekly updates and news"
      />
      <FormCheckbox
        control={control}
        name="notifications"
        label="Enable notifications"
        description="Get notified about important updates"
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}
```

### Complete Form

Combining multiple form components in a single form.

<Preview>
  <FormMixedDemo />
</Preview>

```tsx
import { FormInput, FormTextarea, FormCheckbox } from "@px-ui/forms";
import { useForm } from "react-hook-form";
import { Button } from "@px-ui/core";

interface FormData {
  name: string;
  email: string;
  message: string;
  subscribe: boolean;
}

export default function Example() {
  const { control, handleSubmit, reset } = useForm<FormData>({
    defaultValues: {
      name: "",
      email: "",
      message: "",
      subscribe: false,
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Form submitted:", data);
    reset();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <FormInput
        control={control}
        name="name"
        label="Name"
        description="Your full name"
        placeholder="John Doe"
        required
      />
      <FormInput
        control={control}
        name="email"
        label="Email"
        description="We'll never share your email"
        placeholder="john@example.com"
        required
      />
      <FormTextarea
        control={control}
        name="message"
        label="Message"
        description="Tell us what you think"
        placeholder="Share your thoughts with us..."
        required
      />
      <FormCheckbox
        control={control}
        name="subscribe"
        label="Subscribe to updates"
        description="Receive occasional updates from us"
      />
      <div className="flex gap-2">
        <Button type="submit">Submit</Button>
        <Button type="button" variant="outline" onClick={() => reset()}>
          Reset
        </Button>
      </div>
    </form>
  );
}
```

## API Reference

### FormInput

A form input field that integrates Input with Field and react-hook-form's Controller.

| Prop          | Type              | Default | Description                                                         |
| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
| `control` \*  | `Control`         | -       | The control object from `useForm()` hook                            |
| `name` \*     | `string`          | -       | The name of the form field. Must match a key in your form data type |
| `label` \*    | `React.ReactNode` | -       | Label text for the input field                                      |
| `description` | `React.ReactNode` | -       | Optional description text shown below the input                     |
| `placeholder` | `string`          | -       | Placeholder text displayed when the input is empty                  |
| `required`    | `boolean`         | `false` | Whether the field is required. Adds a visual indicator to the label |

### FormTextarea

A form textarea field that integrates Textarea with Field and react-hook-form's Controller.

| Prop          | Type              | Default | Description                                                         |
| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
| `control` \*  | `Control`         | -       | The control object from `useForm()` hook                            |
| `name` \*     | `string`          | -       | The name of the form field. Must match a key in your form data type |
| `label` \*    | `React.ReactNode` | -       | Label text for the textarea field                                   |
| `description` | `React.ReactNode` | -       | Optional description text shown below the textarea                  |
| `placeholder` | `string`          | -       | Placeholder text displayed when the textarea is empty               |
| `required`    | `boolean`         | `false` | Whether the field is required. Adds a visual indicator to the label |

### FormCheckbox

A form checkbox field that integrates Checkbox with Field and react-hook-form's Controller. Uses horizontal layout by default with the checkbox appearing before the label.

| Prop          | Type              | Default | Description                                                         |
| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
| `control` \*  | `Control`         | -       | The control object from `useForm()` hook                            |
| `name` \*     | `string`          | -       | The name of the form field. Must match a key in your form data type |
| `label` \*    | `React.ReactNode` | -       | Label text for the checkbox field                                   |
| `description` | `React.ReactNode` | -       | Optional description text shown below the checkbox                  |
| `required`    | `boolean`         | `false` | Whether the field is required. Adds a visual indicator to the label |

*\* Required prop*

## Notes

* All form components automatically display validation errors from react-hook-form's validation rules
* The `required` prop only adds a visual indicator (asterisk) to the label; add actual validation rules using react-hook-form's validation options
* FormCheckbox uses horizontal layout with `controlFirst` by default, placing the checkbox before the label
* For radio groups or more complex form controls, use the Field components directly with react-hook-form's Controller component
* These components work seamlessly with react-hook-form's validation, error handling, and form state management