import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:get/get.dart';
import 'package:location/resource/colors.gen.dart';

typedef AvatarSelectedCallback = void Function(String avatarUrl);

class UserAvatarDialog {
  static const String _tag = 'UserAvatarDialog';

  static void show(List<String> avatarList, String? selectedAvatarUrl,
      {required AvatarSelectedCallback onAvatarSelected}) {
    SmartDialog.show(
        alignment: Alignment.bottomCenter,
        builder: (_) =>
            _UserAvatarView(avatarList, onAvatarSelected, selectedAvatarUrl),
        tag: _tag);
  }

  static void dismiss() {
    SmartDialog.dismiss(tag: _tag);
  }
}

class _UserAvatarView extends StatelessWidget {
  final List<String> avatarList;
  final RxnString selectedAvatar = RxnString();
  final AvatarSelectedCallback onAvatarSelected;

  _UserAvatarView(
      this.avatarList, this.onAvatarSelected, String? selectedAvatarUrl) {
    selectedAvatar.value = selectedAvatarUrl;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      width: 278.w,
      child: IntrinsicHeight(
        child: Column(
          children: [
            buildSelectAvatarView(),
            buildUserAvatarListView(),
            SizedBox(height: 30.h),
            GestureDetector(
              onTap: onSelectSureClick,
              child: Container(
                  margin: EdgeInsets.symmetric(horizontal: 25.w),
                  decoration: BoxDecoration(
                    color: ColorName.colorPrimary,
                    borderRadius: BorderRadius.circular(25.w),
                  ),
                  width: 328.w,
                  height: 40.w,
                  child: Center(child: Text('确认'))),
            ),
            SizedBox(height: 20.h),
          ],
        ),
      ),
    );
  }

  Widget buildUserAvatarListView() {
    return Wrap(
      spacing: 10,
      runSpacing: 10,
      children: avatarList.map((url) {
        return GestureDetector(
          onTap: () {
            onSelectAvatarClick(url);
          },
          child: ClipOval(
            child: CachedNetworkImage(
              width: 50.w,
              height: 50.w,
              imageUrl: url,
              fit: BoxFit.cover,
            ),
          ),
        );
      }).toList(),
    );
  }

  Widget buildSelectAvatarView() {
    return ClipOval(
      child: Obx(() {
        return CachedNetworkImage(
          width: 50.w,
          height: 50.w,
          imageUrl: selectedAvatar.value ?? '',
          fit: BoxFit.cover,
        );
      }),
    );
  }

  void onSelectAvatarClick(String avatarUrl) {
    selectedAvatar.value = avatarUrl;
  }

  void onSelectSureClick() {
    final avatar = selectedAvatar.value;
    if (avatar == null || avatar.isEmpty) {
      return;
    }
    onAvatarSelected(avatar);
  }
}