import 'package:dating_touchme_app/generated/assets.dart';
import 'package:dating_touchme_app/widget/live/live_room_pay_item.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:retrofit/http.dart';

class LiveRechargePopup extends StatelessWidget {
  const LiveRechargePopup({
    super.key,
    required this.activePay,
    required this.payChecked,
    required this.payList,
    required this.changePayActive,
  });

  final ValueNotifier<int?> activePay;
  final ValueNotifier<bool> payChecked;
  final List<Map> payList;
  final void Function(int) changePayActive;

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: Container(
        color: Colors.white,
        height: 440.w,
        padding: EdgeInsets.symmetric(horizontal: 10.w),
        child: Column(
          children: [
            _buildHeader(context),
            _buildBalanceInfo(),
            _buildPayOptions(),
            _buildAgreementRow(),
            SizedBox(height: 23.w),
            _buildSubmitButton(),
          ],
        ),
      ),
    );
  }

  Widget _buildHeader(BuildContext context) {
    return Container(
      height: 48.w,
      padding: EdgeInsets.symmetric(horizontal: 8.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          InkWell(
            onTap: () => Get.back(),
            child: Icon(
              Icons.close,
              size: 14.w,
              color: const Color.fromRGBO(114, 114, 114, 1),
            ),
          ),
          Text(
            "玫瑰充值",
            style: TextStyle(
              fontSize: 17.w,
              color: const Color.fromRGBO(51, 51, 51, 1),
              fontWeight: FontWeight.w500,
            ),
          ),
          Icon(
            Icons.close,
            size: 14.w,
            color: Colors.transparent,
          ),
        ],
      ),
    );
  }

  Widget _buildBalanceInfo() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 8.w),
      margin: EdgeInsets.only(bottom: 15.w),
      child: Row(
        children: [
          Text(
            "余额：9玫瑰",
            style: TextStyle(
              fontSize: 11.w,
              color: const Color.fromRGBO(144, 144, 144, 1),
              fontWeight: FontWeight.w500,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildPayOptions() {
    return ValueListenableBuilder<int?>(
      valueListenable: activePay,
      builder: (context, active, _) {
        return Wrap(
          spacing: 7.w,
          runSpacing: 7.w,
          children: [
            ...payList.asMap().entries.map(
              (entry) {
                return LiveRoomPayItem(
                  item: entry.value,
                  active: active ?? 0,
                  index: entry.key,
                  changeActive: changePayActive,
                );
              },
            ),
          ],
        );
      },
    );
  }

  Widget _buildAgreementRow() {
    return Padding(
      padding: EdgeInsets.only(top: 10.w, bottom: 15.w),
      child: Column(
        children: [
          Container(
            height: 1,
            color: const Color.fromRGBO(219, 219, 219, 1),
          ),
          SizedBox(height: 15.w),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Image.asset(
                    Assets.imagesAliPay,
                    width: 17.w,
                    height: 17.w,
                  ),
                  SizedBox(width: 6.w),
                  Text(
                    "支付宝支付",
                    style: TextStyle(
                      fontSize: 11.w,
                      color: const Color.fromRGBO(51, 51, 51, 1),
                    ),
                  ),
                ],
              ),
              ValueListenableBuilder<bool>(
                valueListenable: payChecked,
                builder: (context, checked, _) {
                  return GestureDetector(
                    onTap: () => payChecked.value = !payChecked.value,
                    child: Row(
                      children: [
                        Container(
                          width: 14.w,
                          height: 14.w,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(2.w)),
                            color: checked
                                ? const Color.fromRGBO(239, 19, 46, 1)
                                : Colors.white,
                            border: Border.all(
                              width: 1,
                              color: checked
                                  ? const Color.fromRGBO(239, 19, 46, 1)
                                  : const Color.fromRGBO(188, 188, 188, 1),
                            ),
                          ),
                          child: Center(
                            child: Image.asset(
                              Assets.imagesCheck,
                              width: 6.w,
                              height: 4.w,
                              color: checked ? Colors.white : Colors.transparent,
                            ),
                          ),
                        ),
                        SizedBox(width: 6.w),
                        Text(
                          "我已阅读并同意《充值协议》",
                          style: TextStyle(
                            fontSize: 11.w,
                            color: const Color.fromRGBO(144, 144, 144, 1),
                          ),
                        ),
                      ],
                    ),
                  );
                },
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildSubmitButton() {
    return Container(
      width: double.infinity,
      height: 44.w,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(44.w)),
        gradient: const LinearGradient(
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
          colors: [
            Color.fromRGBO(239, 19, 46, 1),
            Color.fromRGBO(255, 183, 22, 1),
          ],
        ),
      ),
      child: Center(
        child: Text(
          "立即充值",
          style: TextStyle(
            fontSize: 13.w,
            color: Colors.white,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
    );
  }
}