// A stateful component is required to manage the selected rating.
class BasicRatingExample extends StatefulComponent {
  @override
  State<BasicRatingExample> createState() => _BasicRatingExampleState();
}

class _BasicRatingExampleState extends State<BasicRatingExample> {
  num _ratingValue = 2;

  @override
  Component build(BuildContext context) {
    return Rating(
      name: 'rating-1', // A unique name is required for each group
      value: _ratingValue,
      onValueChanged: (newValue) {
        setState(() => _ratingValue = newValue);
      },
      itemStyle: [Mask.star],
    );
  }
}

// A read-only rating does not require state management.
Rating(
  isReadOnly: true,
  value: 3,
  itemStyle: [Mask.star],
  groupAriaLabel: 'Rating: 3 out of 5',
)

class WarningRatingExample extends StatefulComponent {
  @override
  State<WarningRatingExample> createState() => _WarningRatingExampleState();
}

class _WarningRatingExampleState extends State<WarningRatingExample> {
  num _ratingValue = 2;

  @override
  Component build(BuildContext context) {
    return Rating(
      name: 'rating-2',
      value: _ratingValue,
      onValueChanged: (newValue) => setState(() => _ratingValue = newValue),
      itemStyle: [Mask.star2, BgUtil.warning],
    );
  }
}

// A stateful component is required to manage the selected rating.
class MultiColorRatingExample extends StatefulComponent {
  @override
  State<MultiColorRatingExample> createState() => _MultiColorRatingExampleState();
}

class _MultiColorRatingExampleState extends State<MultiColorRatingExample> {
  num _ratingValue = 2;

  void _handleSelect(num newValue) {
    setState(() => _ratingValue = newValue);
  }

  @override
  Component build(BuildContext context) {
    // Use RatingContainer as the parent for a custom group.
    return RatingContainer(
      name: 'rating-3',
      classes: 'gap-1', // Adds spacing between items
      [
        // Each RatingItem can have its own independent style.
        RatingItem(
          value: 1,
          isChecked: _ratingValue == 1,
          onSelect: _handleSelect,
          style: [Mask.heart, const BgUtil('bg-red-400')],
        ),
        RatingItem(
          value: 2,
          isChecked: _ratingValue == 2,
          onSelect: _handleSelect,
          style: [Mask.heart, const BgUtil('bg-orange-400')],
        ),
        RatingItem(
          value: 3,
          isChecked: _ratingValue == 3,
          onSelect: _handleSelect,
          style: [Mask.heart, const BgUtil('bg-yellow-400')],
        ),
        RatingItem(
          value: 4,
          isChecked: _ratingValue == 4,
          onSelect: _handleSelect,
          style: [Mask.heart, const BgUtil('bg-lime-400')],
        ),
        RatingItem(
          value: 5,
          isChecked: _ratingValue == 5,
          onSelect: _handleSelect,
          style: [Mask.heart, const BgUtil('bg-green-400')],
        ),
      ],
    );
  }
}

// Use the `classes` property with Tailwind's arbitrary variants
// to target and style the inner input elements.
Rating(
  name: 'rating-4',
  value: 2,
  classes: '[&_input]:bg-green-500',
  itemStyle: [Mask.star2],
)

// Apply size modifiers to the `style` property of the Rating container.
Rating(name: 'rating-xs', value: 2, style: [Rating.xs], itemStyle: [Mask.star2, BgUtil.warning]),
Rating(name: 'rating-sm', value: 2, style: [Rating.sm], itemStyle: [Mask.star2, BgUtil.warning]),
Rating(name: 'rating-md', value: 2, style: [Rating.md], itemStyle: [Mask.star2, BgUtil.warning]),
Rating(name: 'rating-lg', value: 2, style: [Rating.lg], itemStyle: [Mask.star2, BgUtil.warning]),
Rating(name: 'rating-xl', value: 2, style: [Rating.xl], itemStyle: [Mask.star2, BgUtil.warning]),

class ClearableRatingExample extends StatefulComponent {
  @override
  State<ClearableRatingExample> createState() => _ClearableRatingExampleState();
}

class _ClearableRatingExampleState extends State<ClearableRatingExample> {
  num _ratingValue = 2;

  @override
  Component build(BuildContext context) {
    return Rating(
      name: 'rating-10',
      value: _ratingValue,
      onValueChanged: (newValue) => setState(() => _ratingValue = newValue),
      allowClear: true, // This enables the clearing functionality
      style: [Rating.lg],
      itemStyle: [Mask.star2],
    );
  }
}

class HalfStarRatingExample extends StatefulComponent {
  @override
  State<HalfStarRatingExample> createState() => _HalfStarRatingExampleState();
}

class _HalfStarRatingExampleState extends State<HalfStarRatingExample> {
  num _ratingValue = 1.5;

  @override
  Component build(BuildContext context) {
    return Rating(
      name: 'rating-11',
      value: _ratingValue,
      onValueChanged: (newValue) => setState(() => _ratingValue = newValue),
      allowHalf: true, // Enables half-star logic and automatically adds the `rating-half` class
      allowClear: true,
      style: [Rating.lg],
      itemStyle: [Mask.star2, BgUtil.success],
    );
  }
}