dating_touchme_app/lib/widget/live/live_gift_popup.dart

import 'package:dating_touchme_app/generated/assets.dart';
import 'package:dating_touchme_app/widget/live/live_room_gift_item.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

class LiveGiftPopup extends StatelessWidget {
  const LiveGiftPopup({
    super.key,
    required this.activeGift,
    required this.giftNum,
    required this.giftList,
    required this.changeActive,
  });

  final ValueNotifier<int?> activeGift;
  final ValueNotifier<int> giftNum;
  final List<Map> giftList;
  final void Function(int) changeActive;

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: Container(
        color: const Color.fromRGBO(41, 31, 61, 1),
        height: 363.w,
        child: Column(
          children: [
            _buildHeader(),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.vertical(top: Radius.circular(9.w)),
                  color: const Color.fromRGBO(22, 19, 28, 1),
                ),
                child: Column(
                  children: [
                    _buildTab(),
                    _buildGiftSwiper(),
                    _buildBottomBar(),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildHeader() {
    return Container(
      height: 53.w,
      padding: EdgeInsets.symmetric(horizontal: 10.w),
      child: Row(
        children: [
          Row(
            children: [
              Text(
                "送给： ",
                style: TextStyle(fontSize: 13.w, color: Colors.white),
              ),
              SizedBox(width: 6.w),
              ...List.generate(3, (index) {
                return Padding(
                  padding: EdgeInsets.only(right: 10.w),
                  child: Stack(
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.all(
                          Radius.circular(index == 0 ? 68.w : 34.w),
                        ),
                        child: Container(
                          width: 34.w,
                          height: 34.w,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(
                              Radius.circular(index == 0 ? 68.w : 34.w),
                            ),
                            border: Border.all(
                              width: index == 0 ? 2 : 1,
                              color: const Color.fromRGBO(117, 98, 249, 1),
                            ),
                          ),
                          child: Image.asset(
                            Assets.imagesUserAvatar,
                            width: 32.w,
                            height: 32.w,
                          ),
                        ),
                      ),
                      Positioned(
                        bottom: 0,
                        right: 2.w,
                        child: Container(
                          width: 12.w,
                          height: 12.w,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(12.w)),
                            color: const Color.fromRGBO(117, 98, 249, 1),
                          ),
                          child: Center(
                            child: Image.asset(
                              Assets.imagesCheck,
                              width: 6.w,
                              height: 4.w,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                );
              }),
            ],
          ),
          Container(
            width: 63.w,
            height: 30.w,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(30.w)),
              color: const Color.fromRGBO(117, 98, 249, 1),
            ),
            child: Center(
              child: Text(
                "全选",
                style: TextStyle(fontSize: 13.w, color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTab() {
    return Container(
      height: 47.w,
      padding: EdgeInsets.only(left: 29.w),
      child: Row(
        children: [
          Text(
            "互动",
            style: TextStyle(
              fontSize: 13.w,
              color: const Color.fromRGBO(144, 144, 144, 1),
            ),
          ),
          SizedBox(width: 40.w),
          Text(
            "礼物",
            style: TextStyle(
              fontSize: 13.w,
              color: Colors.white,
              fontWeight: FontWeight.w700,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildGiftSwiper() {
    return Expanded(
      child: ValueListenableBuilder<int?>(
        valueListenable: activeGift,
        builder: (context, active, _) {
          return Swiper(
            autoplay: false,
            itemCount: 6,
            loop: true,
            pagination: const SwiperPagination(
              alignment: Alignment.bottomCenter,
              builder: TDSwiperDotsPagination(
                color: Color.fromRGBO(144, 144, 144, 1),
                activeColor: Color.fromRGBO(77, 77, 77, 1),
              ),
            ),
            itemBuilder: (context, index) {
              return Align(
                alignment: Alignment.topCenter,
                child: Wrap(
                  children: [
                    ...giftList.asMap().entries.map(
                      (entry) => LiveRoomGiftItem(
                        item: entry.value,
                        active: active ?? 0,
                        index: entry.key,
                        changeActive: changeActive,
                      ),
                    ),
                  ],
                ),
              );
            },
          );
        },
      ),
    );
  }

  Widget _buildBottomBar() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              Image.asset(
                Assets.imagesRoseGift,
                width: 21.w,
                height: 21.w,
              ),
              SizedBox(width: 8.w),
              Text(
                "9",
                style: TextStyle(fontSize: 13.w, color: Colors.white),
              ),
              SizedBox(width: 12.w),
              Image.asset(
                Assets.imagesRoseGift,
                width: 68.w,
                height: 33.w,
              ),
            ],
          ),
          ValueListenableBuilder<int>(
            valueListenable: giftNum,
            builder: (context, num, _) {
              return Row(
                children: [
                  _buildAdjustButton(
                    label: "-",
                    enabled: num > 1,
                    onTap: () {
                      if (giftNum.value <= 1) return;
                      giftNum.value -= 1;
                    },
                  ),
                  SizedBox(
                    width: 23.w,
                    child: Center(
                      child: Text(
                        "$num",
                        style: TextStyle(fontSize: 13.w, color: Colors.white),
                      ),
                    ),
                  ),
                  _buildAdjustButton(
                    label: "+",
                    enabled: true,
                    onTap: () {
                      giftNum.value += 1;
                    },
                  ),
                  SizedBox(width: 9.w),
                  Container(
                    width: 63.w,
                    height: 30.w,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(30.w)),
                      gradient: const LinearGradient(
                        begin: Alignment.centerLeft,
                        end: Alignment.centerRight,
                        colors: [
                          Color.fromRGBO(61, 138, 224, 1),
                          Color.fromRGBO(131, 89, 255, 1),
                        ],
                      ),
                    ),
                    child: Center(
                      child: Text(
                        "赠送",
                        style: TextStyle(fontSize: 13.w, color: Colors.white),
                      ),
                    ),
                  ),
                ],
              );
            },
          ),
        ],
      ),
    );
  }

  Widget _buildAdjustButton({
    required String label,
    required bool enabled,
    required VoidCallback onTap,
  }) {
    return InkWell(
      onTap: enabled ? onTap : null,
      child: Container(
        width: 14.w,
        height: 14.w,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(14.w)),
          color: enabled
              ? const Color.fromRGBO(117, 98, 249, 1)
              : Colors.transparent,
          border: Border.all(
            width: 1,
            color: const Color.fromRGBO(117, 98, 249, 1),
          ),
        ),
        child: Center(
          child: Text(
            label,
            style: TextStyle(
              fontSize: 13.w,
              color: enabled
                  ? Colors.white
                  : const Color.fromRGBO(117, 98, 249, 1),
              height: 1,
            ),
          ),
        ),
      ),
    );
  }
}