import 'package:flutter/material.dart';

class HamburgerButton extends StatefulWidget {
  final GlobalKey<ScaffoldState> scaffoldKey;
  final Color backgroundColor;
  final Color iconColor;

  const HamburgerButton({
    super.key,
    required this.scaffoldKey,
    this.backgroundColor = const Color(0xFFEAF1FF), // light background
    this.iconColor = const Color(0xFF00BFFF), // dark blue lines
  });

  @override
  State<HamburgerButton> createState() => _HamburgerButtonState();
}

class _HamburgerButtonState extends State<HamburgerButton>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  late Animation<double> _topShift;
  late Animation<double> _midShift;
  late Animation<double> _bottomShift;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 180),
    );

    // Zig-zag horizontal shift animations
    _topShift = Tween<double>(
      begin: 0,
      end: -6,
    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));

    _midShift = Tween<double>(
      begin: 0,
      end: 6,
    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));

    _bottomShift = Tween<double>(
      begin: 0,
      end: -6,
    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));
  }

  void _onTap() async {
    _controller.forward(); // start zig-zag instantly

    await Future.delayed(const Duration(milliseconds: 120));

    widget.scaffoldKey.currentState?.openDrawer();

    _controller.reverse(); // animate back even while drawer opens
  }

  // void _onTap() async {
  //   _controller.forward();

  //   await Future.delayed(const Duration(milliseconds: 140)); // smoother

  //   widget.scaffoldKey.currentState?.openDrawer();

  //   _controller.reverse();
  // }

  @override
  Widget build(BuildContext context) {
    return Positioned(
      top: 40,
      left: 16,
      child: GestureDetector(
        onTap: _onTap,
        child: AnimatedBuilder(
          animation: _controller,
          builder: (_, __) {
            return Container(
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: widget.backgroundColor,
                shape: BoxShape.circle,
                // border: Border.all(
                //   color: widget.iconColor.withOpacity(0.5),
                //   width: 2,
                // ),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.1),
                    blurRadius: 8,
                    offset: const Offset(0, 3),
                  ),
                ],
              ),
              child: _ThreeLineMenuIcon(
                color: widget.iconColor,
                topDx: _topShift.value,
                midDx: _midShift.value,
                bottomDx: _bottomShift.value,
              ),
            );
          },
        ),
      ),
    );
  }

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

class _ThreeLineMenuIcon extends StatelessWidget {
  final Color color;
  final double topDx;
  final double midDx;
  final double bottomDx;

  const _ThreeLineMenuIcon({
    required this.color,
    required this.topDx,
    required this.midDx,
    required this.bottomDx,
  });

  Widget _menuLine(double width, double shift) {
    return Transform.translate(
      offset: Offset(shift, 0),
      child: Container(
        width: width,
        height: 3,
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(40),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _menuLine(24, topDx),
        const SizedBox(height: 4),
        _menuLine(14, midDx),
        const SizedBox(height: 4),
        _menuLine(20, bottomDx),
      ],
    );
  }
}
