import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class SelectTimerWidget extends StatefulWidget {
  final String title;
  final int time;

  const SelectTimerWidget(this.title, this.time, {super.key});

  @override
  State<SelectTimerWidget> createState() => _SelectTimerWidgetState();
}

class _SelectTimerWidgetState extends State<SelectTimerWidget> {
  late FixedExtentScrollController _hourScrollController;
  late FixedExtentScrollController _minuteScrollController;

  int _hour = 0;
  int _minute = 0;

  @override
  void initState() {
    super.initState();
    _hour = widget.time ~/ 60;
    _minute = widget.time % 60;
    _hourScrollController = FixedExtentScrollController(initialItem: _hour);
    _minuteScrollController = FixedExtentScrollController(initialItem: _minute);
  }

  @override
  void dispose() {
    super.dispose();
    _hourScrollController.dispose();
    _minuteScrollController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 12.w),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            padding: EdgeInsets.symmetric(vertical: 10.w),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  widget.title,
                  style: TextStyle(
                    fontSize: 16.sp,
                    color: Colors.black87,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                GestureDetector(
                  onTap: () => Get.back(),
                  child: Container(
                    width: 26.w,
                    height: 26.w,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(26.r),
                    ),
                    child: Icon(
                      Icons.close,
                      size: 18.w,
                      color: Colors.grey[400],
                    ),
                  ),
                )
              ],
            ),
          ),
          Divider(
            height: 1,
            color: Colors.grey[300],
          ),
          SizedBox(
            height: 220.w,
            child: Row(
              children: [
                Expanded(
                  child: CupertinoPicker.builder(
                    itemExtent: 40.w,
                    diameterRatio: 1.1,
                    squeeze: 1.25,
                    childCount: 24,
                    selectionOverlay: _selectionOverlayWidget(
                      isRadiusLeft: true,
                    ),
                    scrollController: _hourScrollController,
                    itemBuilder: (BuildContext context, int index) {
                      return Container(
                        padding: EdgeInsets.only(right: 10.w),
                        alignment: Alignment.centerRight,
                        child: Text(
                          '$index时',
                          style: _hour == index
                              ? TextStyle(
                                  color: const Color(0xFFFF5561),
                                  fontSize: 15.sp,
                                  fontWeight: FontWeight.w500,
                                )
                              : TextStyle(
                                  color: const Color(0xFF9D9D9D),
                                  fontSize: 15.sp,
                                ),
                        ),
                      );
                    },
                    onSelectedItemChanged: (int index) {
                      setState(() {
                        _hour = index;
                      });
                    },
                  ),
                ),
                Expanded(
                  child: CupertinoPicker.builder(
                    itemExtent: 40.w,
                    diameterRatio: 1.1,
                    squeeze: 1.25,
                    childCount: 60,
                    selectionOverlay: _selectionOverlayWidget(
                      isRadiusRight: true,
                    ),
                    scrollController: _minuteScrollController,
                    itemBuilder: (BuildContext context, int index) {
                      return Container(
                        padding: EdgeInsets.only(left: 10.w),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '$index分',
                          style: _minute == index
                              ? TextStyle(
                                  color: const Color(0xFFFF5561),
                                  fontSize: 15.sp,
                                  fontWeight: FontWeight.w500,
                                )
                              : TextStyle(
                                  color: const Color(0xFF9D9D9D),
                                  fontSize: 15.sp,
                                ),
                        ),
                      );
                    },
                    onSelectedItemChanged: (int index) {
                      setState(() {
                        _minute = index;
                      });
                    },
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.only(bottom: 20.w),
            child: Row(
              children: [
                Expanded(
                  child: GestureDetector(
                    onTap: () => Get.back(),
                    child: Container(
                      height: 48.w,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: Colors.grey[300],
                        borderRadius: BorderRadius.circular(12.r),
                      ),
                      child: Text(
                        'cancel'.tr, // 取消
                        style: TextStyle(
                          fontSize: 16.sp,
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ),
                ),
                10.horizontalSpace,
                Expanded(
                  child: GestureDetector(
                    onTap: () {
                      int time = _hour * 60 + _minute;
                      Get.back(result: time);
                    },
                    child: Container(
                      height: 48.w,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.circular(12.r),
                      ),
                      child: Text(
                        'confirm'.tr, // 确认
                        style: TextStyle(
                          fontSize: 16.sp,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _selectionOverlayWidget({
    bool isRadiusLeft = false,
    bool isRadiusRight = false,
  }) {
    return Container(
      decoration: BoxDecoration(
        color: const Color.fromARGB(45, 255, 85, 97),
        borderRadius: BorderRadius.horizontal(
          left: isRadiusLeft ? Radius.circular(8.w) : Radius.zero,
          right: isRadiusRight ? Radius.circular(8.w) : Radius.zero,
        ),
      ),
    );
  }
}