import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_xlider/flutter_xlider.dart';
import 'package:gap/gap.dart';
import 'package:krow/core/presentation/styles/kw_text_styles.dart';
import 'package:krow/core/presentation/styles/theme.dart';

class ExpSliderWidget extends StatefulWidget {
  final int initialValue;
  final ValueChanged<int>? onChanged;

  const ExpSliderWidget({
    super.key,
    this.initialValue = 1,
    this.onChanged,
  });

  @override
  State<ExpSliderWidget> createState() => _ExpSliderWidgetState();
}

class _ExpSliderWidgetState extends State<ExpSliderWidget> {
  late double _value;

  @override
  void initState() {
    super.initState();
    _value = widget.initialValue.toDouble();
    _value = _value.clamp(1, 20);
  }

  @override
  void didUpdateWidget(covariant ExpSliderWidget oldWidget) {
    _value = widget.initialValue.toDouble();
    _value = _value.clamp(1, 20);
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(top: 12, bottom: 12),
      margin: const EdgeInsets.only(bottom: 24),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        border: Border.all(
          color: AppColors.grayStroke,
          width: 1,
        ),
        color: AppColors.graySecondaryFrame,
      ),
      child: Column(
        children: [
          const Gap(24),
          FlutterSlider(
            min: 1,
            max: 20,
            handlerHeight: 26,
            handlerWidth: 26,
            tooltip: FlutterSliderTooltip(
                alwaysShowTooltip: true,
                custom: (value) {
              return _SliderTooltip(
                text: value.toStringAsFixed(0),
              );
            }),
            handler: FlutterSliderHandler(
                child: Container(
              decoration: const BoxDecoration(
                color: AppColors.grayWhite,
                shape: BoxShape.circle,
              ),
              child: Center(
                child: Container(
                    height: 16,
                    width: 16,
                    decoration: const BoxDecoration(
                      color: AppColors.bgColorDark,
                      shape: BoxShape.circle,
                    )),
              ),
            )),
            trackBar: FlutterSliderTrackBar(
              activeTrackBarHeight: 12,
              inactiveTrackBarHeight: 12,
              inactiveTrackBar: BoxDecoration(
                borderRadius: BorderRadius.circular(6),
                color: AppColors.grayTintStroke,
              ),
              activeTrackBar: BoxDecoration(
                borderRadius: BorderRadius.circular(6),
                color: AppColors.bgColorDark,
              ),
            ),
            values: [_value],
            onDragging: (handlerIndex, lowerValue, upperValue) {
              // setState(() {
              //   _value = lowerValue;
              // });
              widget.onChanged?.call(lowerValue.toInt());
            },
          ),
          Padding(
            padding: const EdgeInsets.only(left: 12, right: 12),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '1 ${'year'.tr()}',
                  style: AppTextStyles.bodySmallMed
                      .copyWith(color: AppColors.blackCaptionGreen),
                ),
                Text(
                  '20 ${'years'.tr()}',
                  style: AppTextStyles.bodySmallMed
                      .copyWith(color: AppColors.blackCaptionGreen),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

class _SliderTooltip extends StatelessWidget {
  final String text;

  const _SliderTooltip({
    required this.text,
  });

  @override
  Widget build(BuildContext context) {
    return Transform.translate(
      offset: const Offset(0, -30),
      child: Container(
        alignment: Alignment.centerLeft,
        width: 50,
        height: 36,
        child: CustomPaint(
          painter: TooltipPainter(),
          child: Center(
            child: Padding(
              padding: const EdgeInsets.only(bottom: 10),
              child: Text(
                '$text y',
                textAlign: TextAlign.center,
                style: AppTextStyles.bodySmallMed.copyWith(
                  color: AppColors.grayWhite,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class TooltipPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = const Color(0xFF001F2D);
    final path = Path();

    path.addRRect(
      RRect.fromRectAndRadius(
        const Rect.fromLTWH(0, 0, 48, 30),
        const Radius.circular(15),
      ),
    );

    const double triangleWidth = 10;
    const double triangleHeight = 6;
    const double centerX = 24;

    path.moveTo(centerX - triangleWidth / 2, 30);
    path.quadraticBezierTo(
      centerX,
      40 + triangleHeight / 3,
      centerX + triangleWidth / 2,
      30,
    );
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}
