import 'package:chat/configs/app_colors.dart';
import 'package:chat/controllers/user_controller.dart';
import 'package:chat/services/auth_service.dart';
import 'package:chat/views/home/widgets/pop_menu_item.dart';
import 'package:chat/widgets/custom_avatar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:image_cropper/image_cropper.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';

class UserInfoAvatarPage extends StatelessWidget {
  const UserInfoAvatarPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.black,
      appBar: AppBar(
        title: const Text(
          '头像',
          style: TextStyle(
            color: AppColors.white,
          ),
        ),
        backgroundColor: AppColors.transparent,
        foregroundColor: AppColors.white,
        systemOverlayStyle: SystemUiOverlayStyle.light,
        actions: [
          IconButton(
            onPressed: _showMenu,
            icon: const Icon(Icons.more_horiz),
          ),
        ],
      ),
      body: Center(
        child: GetX<AuthService>(
          builder: (_) {
            return CustomAvatar(
              _.userInfo.value.avatar,
              size: Get.width,
            );
          },
        ),
      ),
    );
  }

  Future<void> _showMenu() async {
    showModalBottomSheet(
      context: Get.context!,
      isScrollControlled: true,
      backgroundColor: AppColors.white,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(8)),
      ),
      builder: (context) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            PopMenuItem(
              '从手机相册选择',
              onTap: _pickImage,
            ),
            const Divider(height: 0),
            Container(
              color: AppColors.page,
              height: 8,
            ),
            const Divider(height: 0),
            PopMenuItem(
              '取消',
              onTap: () {
                Get.back();
              },
            ),
          ],
        );
      },
    );
  }

  Future _pickImage() async {
    Get.back();
    final result = await AssetPicker.pickAssets(
      Get.context!,
      pickerConfig: const AssetPickerConfig(
        maxAssets: 1,
        textDelegate: AssetPickerTextDelegate(),
        requestType: RequestType.image,
      ),
    );

    if (result == null) {
      return;
    }

    _cropImage((await result.first.file)!.path);
  }

  Future<void> _cropImage(String imagePath) async {
    CroppedFile? croppedFile = await ImageCropper().cropImage(
      sourcePath: imagePath,
      maxHeight: 512,
      maxWidth: 512,
      compressQuality: 90,
      aspectRatio: const CropAspectRatio(
        ratioX: 1,
        ratioY: 1,
      ),
      compressFormat: ImageCompressFormat.jpg,
      uiSettings: [
        IOSUiSettings(
          title: '头像剪裁',
          doneButtonTitle: '完成',
          cancelButtonTitle: '取消',
        ),
        AndroidUiSettings(
          toolbarTitle: '头像剪裁',
        ),
      ],
    );
    if (croppedFile != null) {
      UserController.to.uploadAvatar(croppedFile.path);
    }
  }
}