import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:vitalapp/pages/medical/models/item.dart';

// ignore: must_be_immutable
class AnimatedToggle extends StatefulWidget {
  final List<String> values;
  final ValueChanged onToggleCallback;
  final Color backgroundColor;
  final Color buttonColor;
  final Color textColor;
  PressureStatus statusValue;

  AnimatedToggle({
    super.key,
    required this.values,
    required this.onToggleCallback,
    this.backgroundColor = const Color(0xFFe7e7e8),
    this.buttonColor = const Color(0xFFFFFFFF),
    this.textColor = Colors.black,
    this.statusValue = PressureStatus.left,
  });
  @override
  _AnimatedToggleState createState() => _AnimatedToggleState();
}

class _AnimatedToggleState extends State<AnimatedToggle> {
  // bool initialPosition = true;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: Get.width * 0.24,
      height: Get.width * 0.052,
      // margin: const EdgeInsets.all(20),
      child: Stack(
        children: <Widget>[
          GestureDetector(
            onTap: () {
              if (widget.statusValue == PressureStatus.left) {
                widget.statusValue = PressureStatus.right;
              } else {
                widget.statusValue = PressureStatus.left;
              }
              widget.onToggleCallback(widget.statusValue);
              setState(() {});
            },
            child: Container(
              width: Get.width * 0.24,
              height: Get.width * 0.052,
              decoration: ShapeDecoration(
                color: widget.backgroundColor,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(Get.width * 0.04),
                ),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: List.generate(
                  widget.values.length,
                  (index) => Padding(
                    padding: EdgeInsets.symmetric(
                        horizontal: Get.width * 0.4 * 0.05),
                    child: Text(
                      widget.values[index],
                      style: TextStyle(
                        fontFamily: 'Rubik',
                        fontSize: Get.width * 0.02,
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
          AnimatedAlign(
            duration: const Duration(milliseconds: 250),
            curve: Curves.decelerate,
            alignment: widget.statusValue == PressureStatus.left
                ? Alignment.centerLeft
                : Alignment.centerRight,
            child: Container(
              width: Get.width * 0.132,
              height: Get.width * 0.052,
              decoration: ShapeDecoration(
                color: widget.buttonColor,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(Get.width * 0.04),
                ),
              ),
              alignment: Alignment.center,
              child: Text(
                widget.statusValue == PressureStatus.left
                    ? widget.values[0]
                    : widget.values[1],
                style: TextStyle(
                  fontFamily: 'Rubik',
                  fontSize: Get.width * 0.018,
                  color: widget.textColor,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}