import 'package:chat/configs/app_colors.dart';
import 'package:chat/widgets/custom_avatar.dart';
import 'package:flutter/material.dart';
import 'package:tencent_im_sdk_plugin/models/v2_tim_group_member_full_info.dart';

class GroupUserSelector extends StatefulWidget {
  final Function(List<V2TimGroupMemberFullInfo>) onChanged;
  final List<V2TimGroupMemberFullInfo> selectedList;
  final List<V2TimGroupMemberFullInfo?> originalList;

  const GroupUserSelector({
    required this.onChanged,
    required this.selectedList,
    required this.originalList,
    Key? key,
  }) : super(key: key);

  @override
  State<GroupUserSelector> createState() => _GroupUserSelectorState();
}

class _GroupUserSelectorState extends State<GroupUserSelector> {
  /// 选中的好友列表
  List<V2TimGroupMemberFullInfo> selectList =
      List<V2TimGroupMemberFullInfo>.empty(growable: true);

  /// 选择列表改变的事件，更新选中列表
  _selectListChange(id) {
    setState(() {
      if (selectList.contains(id)) {
        selectList.remove(id);
      } else {
        selectList.add(id);
      }
    });
    widget.onChanged(selectList);
  }

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemBuilder: (_, index) {
        return _contactItem(widget.originalList[index]!);
      },
      separatorBuilder: (_, index) {
        return const Divider(
          height: 0,
        );
      },
      itemCount: widget.originalList.length,
    );
  }

  Widget _contactItem(
    V2TimGroupMemberFullInfo info,
  ) {
    return Column(
      children: [
        GestureDetector(
          onTap: () {},
          child: Container(
            color: AppColors.white,
            padding: const EdgeInsets.symmetric(vertical: 4),
            child: GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () {
                setState(() {
                  _selectListChange(info);
                });
              },
              child: Row(
                children: [
                  Radio<V2TimGroupMemberFullInfo>(
                    groupValue: selectList.contains(info) ? info : null,
                    onChanged: (value) {
                      setState(() {
                        _selectListChange(info);
                      });
                    },
                    value: info,
                    toggleable: true,
                  ),
                  CustomAvatar(
                    info.faceUrl,
                    size: 32,
                    radius: 2,
                  ),
                  const SizedBox(
                    width: 16,
                  ),
                  Expanded(
                    child: Text(
                      info.nickName!,
                      style: const TextStyle(
                        fontSize: 16,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        const Divider(
          height: 0,
          indent: 92,
        ),
      ],
    );
  }
}