import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/string_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/models/size_config.dart';
import 'package:test_sa/modules/cm_module/cm_detail_provider.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';

class TimerWidget extends StatefulWidget {
  const TimerWidget({Key? key}) : super(key: key);

  @override
  _TimerWidgetState createState() => _TimerWidgetState();
}

class _TimerWidgetState extends State<TimerWidget> {
  Offset position = Offset(SizeConfig.screenWidth! - 100, SizeConfig.screenHeight! / 2 - 50);

  @override
  Widget build(BuildContext context) {
    return Consumer<CMDetailProvider>(
      builder: (context, provider, child) {
        return Positioned(
          left: position.dx,
          top: position.dy,
          child: GestureDetector(
            onPanEnd: (details) {},
            onPanUpdate: (details) {
              setState(() {
                if (position.dy + details.delta.dy > 0 && position.dy + details.delta.dy < 560) {
                  position = Offset(
                    position.dx + details.delta.dx, // Update the X position
                    position.dy + details.delta.dy, // Update the Y position
                  );
                }
              });
            },
            child: buildTimerWidget(provider),
          ),
        );
      },
    );
  }

  Widget buildTimerWidget(CMDetailProvider provider) {
    return Container(
      padding: EdgeInsets.all(8.toScreenHeight),
      width: 80.toScreenWidth,
      decoration: BoxDecoration(
        color: AppColor.black10,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Column(
        children: [
          'drag_icon'.toSvgAsset(),
          12.height,
          provider.currentTime.toString().toDragAbleTimerFormat.tinyFont(context).custom(color: AppColor.white10, fontWeight: FontWeight.w600),
          2.height,
          context.translation.hours.tinyFont(context).custom(color: AppColor.white10, fontWeight: FontWeight.w600),
        ],
      ),
    );
  }
}
