// The toggle component
Toggle(isChecked: true);


// A simple stateful wrapper to manage the toggle's state
class MyToggle extends StatefulComponent {
  bool _isChecked = true;

  @override
  State<MyToggle> createState() => _MyToggleState();
}

class _MyToggleState extends State<MyToggle> {
  @override
  Component build(BuildContext context) {
    return Toggle(
      isChecked: _isChecked,
      onToggle: (newValue) {
        setState(() => _isChecked = newValue);
      },
    );
  }
}

class ToggleWithFieldset extends StatefulComponent {
  bool _rememberMe = true;

  @override
  State<ToggleWithFieldset> createState() => _ToggleWithFieldsetState();
}

class _ToggleWithFieldsetState extends State<ToggleWithFieldset> {
  @override
  Component build(BuildContext context) {
    return Fieldset(
      [
        Legend([text('Login options')]),
        // For labels with interactive elements, use Jaspr's primitive `label()`.
        label(
          [
            Toggle(
              isChecked: _rememberMe,
              onToggle: (val) => setState(() => _rememberMe = val),
            ),
            span([text('Remember me')], classes: 'label-text ml-2'),
          ],
          classes: 'label cursor-pointer justify-start',
        ),
      ],
      style: [Size.w64],
      classes: 'p-4 bg-base-100 border border-base-300 rounded-box',
    );
  }
}

Toggle(isChecked: true, style: [Toggle.xs]),
Toggle(isChecked: true, style: [Toggle.sm]),
Toggle(isChecked: true, style: [Toggle.md]), // Default
Toggle(isChecked: true, style: [Toggle.lg]),
Toggle(isChecked: true, style: [Toggle.xl]),

Toggle(isChecked: true, style: [Toggle.primary]),
Toggle(isChecked: true, style: [Toggle.secondary]),
Toggle(isChecked: true, style: [Toggle.accent]),
Toggle(isChecked: true, style: [Toggle.neutral]),
Toggle(isChecked: true, style: [Toggle.info]),
Toggle(isChecked: true, style: [Toggle.success]),
Toggle(isChecked: true, style: [Toggle.warning]),
Toggle(isChecked: true, style: [Toggle.error]),

Toggle(disabled: true),
Toggle(isChecked: true, disabled: true),

// The `indeterminate` property must be set on the DOM element after it renders.
// This requires a stateful component and a way to reference the element, like an ID.

class MyIndeterminateToggle extends StatefulComponent {
  final String _toggleId = 'my-unique-id';

  @override
  State<MyIndeterminateToggle> createState() => _MyIndeterminateToggleState();
}

class _MyIndeterminateToggleState extends State<MyIndeterminateToggle> {
  @override
  void initState() {
    super.initState();
    if (kIsWeb) {
      // Set the property after the component has been added to the DOM.
      Future.delayed(Duration.zero, () {
        final element = document.getElementById(widget._toggleId) as HTMLInputElement?;
        if (element != null) {
          element.indeterminate = true;
        }
      });
    }
  }

  @override
  Component build(BuildContext context) {
    return Toggle(id: widget._toggleId);
  }
}

// This example requires a stateful component to manage the checked state.
class IconToggle extends StatefulComponent {
  @override
  State<IconToggle> createState() => _IconToggleState();
}

class _IconToggleState extends State<IconToggle> {
  bool _isChecked = false;

  @override
  Component build(BuildContext context) {
    return label(
      classes: 'toggle text-base-content',
      [
        input(
          type: InputType.checkbox,
          // Conditionally add the 'checked' attribute
          attributes: { if (_isChecked) 'checked': '' },
          events: {
            'change': (dynamic rawEvent) {
              // Handle the raw DOM event to get the new state
              if (kIsWeb) {
                final event = rawEvent as Event;
                final target = event.target as HTMLInputElement;
                setState(() => _isChecked = target.checked);
              }
            }
          },
        ),
        // Your SVG icon components here
        _checkIcon(),
        _crossIcon(),
      ],
    );
  }
}

Toggle(
  isChecked: _isChecked,
  onToggle: (newValue) => setState(() => _isChecked = newValue),
  classes: 'border-indigo-600 bg-indigo-500 checked:bg-orange-400 checked:text-orange-800 checked:border-orange-500',
);