import 'package:chat/configs/app_colors.dart';
import 'package:chat/routes/user_routes.dart';
import 'package:chat/services/auth_service.dart';
import 'package:chat/utils/convert.dart';
import 'package:chat/utils/ui_tools.dart';
import 'package:chat/widgets/custom_avatar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';

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

  final double paddingTop = 96;
  final double paddingBottom = 24;
  final double avatarHeight = 64;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          color: AppColors.white,
          padding: EdgeInsets.only(
            left: 24,
            top: paddingTop,
            right: 24,
            bottom: paddingBottom,
          ),
          height: avatarHeight + paddingTop + paddingBottom,
          child: GetX<AuthService>(
            builder: (_) {
              return Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  InkWell(
                    onTap: () {
                      Get.toNamed(UserRoutes.info);
                    },
                    child: CustomAvatar(
                      _.userInfo.value.avatar,
                      size: avatarHeight,
                    ),
                  ),
                  const SizedBox(width: 16),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      InkWell(
                        onTap: () {
                          Get.toNamed(UserRoutes.info);
                        },
                        child: Text(
                          _.userInfo.value.nickname ?? '',
                          style: const TextStyle(
                            fontSize: 22,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                      ),
                      Row(
                        children: [
                          Text(
                            Convert.hideCenterStr(_.userInfo.value.username),
                            style: const TextStyle(
                              color: AppColors.unactive,
                            ),
                          ),
                          const SizedBox(width: 4),
                          InkWell(
                            onTap: () {
                              Clipboard.setData(
                                ClipboardData(
                                  text: _.userInfo.value.username,
                                ),
                              );
                              UiTools.toast('地址复制成功');
                            },
                            child: const Icon(
                              Icons.copy,
                              size: 12,
                              color: AppColors.unactive,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                  Expanded(child: Container()),
                  InkWell(
                    onTap: () {
                      Get.toNamed(UserRoutes.qrCode);
                    },
                    child: Row(
                      children: const [
                        Icon(
                          Icons.qr_code,
                          size: 18,
                          color: AppColors.unactive,
                        ),
                        SizedBox(width: 8),
                        Icon(
                          Icons.arrow_forward_ios,
                          size: 16,
                          color: AppColors.unactive,
                        ),
                      ],
                    ),
                  ),
                ],
              );
            },
          ),
        ),
        const Divider(
          height: 0,
          color: AppColors.border,
        ),
      ],
    );
  }
}