import 'package:flutter/material.dart';

class SlideConfirm extends StatefulWidget {
  final VoidCallback onConfirmed;

  const SlideConfirm({required this.onConfirmed});

  @override
  State<SlideConfirm> createState() => _SlideConfirmState();
}

class _SlideConfirmState extends State<SlideConfirm> {
  double _drag = 0;
  bool _confirmed = false;

  static const double size = 52;

  @override
  Widget build(BuildContext context) {
    final scheme = Theme.of(context).colorScheme;

    return SizedBox(
      width: double.infinity,
      height: 58,
      child: LayoutBuilder(
        builder: (context, constraints) {
          final maxDrag = constraints.maxWidth - size;

          return Container(
            height: 58,
            decoration: BoxDecoration(
              color: scheme.error.withValues(alpha: 0.12),
              borderRadius: BorderRadius.circular(30),
            ),
            child: Stack(
              alignment: Alignment.centerLeft,
              children: [
                Center(
                  child: Text(
                    _confirmed ? 'Closing tab...' : 'Slide to confirm closing',
                    style: TextStyle(
                      color: scheme.error,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                ),

                Positioned(
                  left: _drag,
                  child: GestureDetector(
                    onHorizontalDragUpdate: (details) {
                      if (_confirmed) return;

                      setState(() {
                        _drag += details.delta.dx;
                        _drag = _drag.clamp(0, maxDrag);
                      });
                    },
                    onHorizontalDragEnd: (_) {
                      if (_drag >= maxDrag * 0.85) {
                        setState(() {
                          _confirmed = true;
                          _drag = maxDrag;
                        });

                        Future.delayed(
                          const Duration(milliseconds: 250),
                          widget.onConfirmed,
                        );
                      } else {
                        setState(() {
                          _drag = 0;
                        });
                      }
                    },
                    child: Container(
                      width: size,
                      height: size,
                      decoration: BoxDecoration(
                        color: scheme.error,
                        shape: BoxShape.circle,
                      ),
                      child: Icon(
                        Icons.arrow_forward_rounded,
                        color: scheme.onError,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}