// The Filter component is controlled; its state must be managed by a parent.
class FormFilterExample extends StatefulComponent {
  @override
  State<FormFilterExample> createState() => _FormFilterExampleState();
}

class _FormFilterExampleState extends State<FormFilterExample> {
  // Use a nullable type to represent the cleared (reset) state.
  String? _selectedFramework;

  @override
  Component build(BuildContext context) {
    return Filter<String>(
      // The `name` is required for the underlying radio group.
      name: 'state-management-example',
      // The currently selected value, provided from the parent's state.
      groupValue: _selectedFramework,
      // This callback updates the parent's state when a new item is selected.
      onValueChanged: (newValue) {
        setState(() => _selectedFramework = newValue);
      },
      // This callback handles the native form reset event.
      onReset: () {
        setState(() => _selectedFramework = null);
      },
      // The `method` defaults to `form`, but is explicit here for clarity.
      method: FilterMethod.form,
      [
        FilterItem(value: 'Riverpod', label: 'Riverpod'),
        FilterItem(value: 'Bloc', label: 'Bloc'),
        FilterItem(value: 'Signals', label: 'Signals'),
      ],
    );
  }
}

// This version also requires a stateful parent to manage the selected value.
class DivFilterExample extends StatefulComponent {
  @override
  State<DivFilterExample> createState() => _DivFilterExampleState();
}

class _DivFilterExampleState extends State<DivFilterExample> {
  // Initialize the state with the value of the reset item.
  String _selectedMetaframework = 'All';

  @override
  Component build(BuildContext context) {
    return Filter<String>(
      name: 'state-management-div-example',
      groupValue: _selectedMetaframework,
      onValueChanged: (newValue) {
        setState(() => _selectedMetaframework = newValue);
      },
      // Explicitly set the method to `div`.
      method: FilterMethod.div,
      [
        // The first item is designated as the reset option.
        FilterItem(value: 'All', label: 'All', isResetItem: true),
        FilterItem(value: 'Riverpod', label: 'Riverpod'),
        FilterItem(value: 'Bloc', label: 'Bloc'),
        FilterItem(value: 'Signals', label: 'Signals'),
      ],
    );
  }
}