import 'package:flutter/material.dart';
import 'package:vbvs_app/common/color/appConstants.dart';
import 'package:vbvs_app/common/util/FitTool.dart';

class FancyCircleCheckbox extends StatefulWidget {
  final bool value;
  final ValueChanged<bool> onChanged;
  final Color borderColor;
  final Color fillColor;

  const FancyCircleCheckbox({
    Key? key,
    required this.value,
    required this.onChanged,
    this.borderColor = Colors.white,
    this.fillColor = Colors.blue,
  }) : super(key: key);

  @override
  State<FancyCircleCheckbox> createState() => _FancyCircleCheckboxState();
}

class _FancyCircleCheckboxState extends State<FancyCircleCheckbox>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(milliseconds: 200),
      vsync: this,
    );
    _scaleAnimation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );

    if (widget.value) {
      _controller.forward();
    }
  }

  @override
  void didUpdateWidget(covariant FancyCircleCheckbox oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.value != oldWidget.value) {
      widget.value ? _controller.forward() : _controller.reverse();
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => widget.onChanged(!widget.value),
      child: Container(
        width: 32.rpx,
        height: 32.rpx,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          border: Border.all(
            color: widget.value
                ? widget.borderColor
                : widget.borderColor.withOpacity(0.5),
            width: 1.rpx,
          ),
        ),
        child: ScaleTransition(
          scale: _scaleAnimation,
          child: Container(
            margin: EdgeInsets.all(6.rpx),
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: widget.fillColor,
            ),
          ),
        ),
      ),
    );
  }
}