import 'package:cs_resources/generated/assets.dart';
import 'package:cs_resources/generated/l10n.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:cs_resources/theme/theme_config.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:plugin_basic/provider/user_config/user_config_service.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_appbar.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/shatter/setting_item_container.dart';
import 'package:widgets/widget_export.dart';

import 'me_view_model.dart';

@RoutePage()
class MePage extends HookConsumerWidget {
  const MePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final viewModel = ref.watch(meViewModelProvider.notifier);
    final userConfig = UserConfigService.getState(ref: ref);

    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        "",
        showBackButton: false,
        backgroundColor: context.appColors.btnBgDefault,
        systemUiOverlayStyle: MediaQuery.of(context).platformBrightness == Brightness.dark
            ? ThemeConfig.systemUiOverlayStyleDarkTheme
            : ThemeConfig.systemUiOverlayStyleLightThemeWhite,
      ),
      backgroundColor: context.appColors.backgroundDark,
      body: EasyRefresh(
        controller: viewModel.refreshController,
        header: const MaterialHeader(),
        onRefresh: viewModel.onRefresh,
        child: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: SizedBox(
            width: double.infinity,
            child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                //顶部信息
                _buildTopProfile(context, ref),

                //关注与粉丝
                _buildFollower(context, ref),

                //我的发布
                SettingItemContainer(
                  title: S.current.my_post,
                  iconPath: Assets.mainMeMyPostIcon,
                  isShowMoreIcon: true,
                  rightWidget: MyTextView(
                    userConfig.user?.postsCount ?? "0",
                    textColor: context.appColors.textPrimary,
                    fontSize: 20,
                    isFontMedium: true,
                  ),
                ).onTap(viewModel.gotoMyPostPage).marginOnly(top: 10),

                //家庭
                SettingItemContainer(
                  title: S.current.household,
                  iconPath: Assets.mainMeHouseholdIcon,
                  isShowMoreIcon: true,
                  rightWidget: MyTextView(
                    userConfig.user?.households?.length.toString() ?? "0",
                    textColor: context.appColors.textPrimary,
                    fontSize: 20,
                    isFontMedium: true,
                  ),
                ).onTap(viewModel.gotoMyHouseholdPage),

                //房产
                SettingItemContainer(
                  title: S.current.estate,
                  iconPath: Assets.mainMeEstateIcon,
                  isShowMoreIcon: true,
                  rightWidget: MyTextView(
                    userConfig.user?.estates?.fold(0, (sum, estate) {
                      return sum + (estate.accounts?.length ?? 0);
                    }).toString() ?? "0",
                    textColor: context.appColors.textPrimary,
                    fontSize: 20,
                    isFontMedium: true,
                  ),
                ).onTap(viewModel.gotoMyEstatePage),

                //设置
                SettingItemContainer(
                  title: S.current.settings,
                  iconPath: Assets.mainMeSettingIcon,
                  isShowMoreIcon: true,
                ).onTap(viewModel.gotoSettingPage),
              ],
            ),
          ),
        ),
      ),
    );
  }

  //编辑顶部的关注与粉丝数量
  Widget _buildFollower(BuildContext context, WidgetRef ref) {
    final viewModel = ref.watch(meViewModelProvider.notifier);
    final userConfig = UserConfigService.getState(ref: ref);

    return Container(
      color: context.appColors.whiteSecondBG,
      width: double.infinity,
      height: 50,
      child: Row(
        children: [
          //关注
          Row(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              MyTextView(
                S.current.following,
                isFontBold: true,
                fontSize: 16,
                textColor: context.appColors.textBlack,
              ),
              MyTextView(
                "(${userConfig.user?.followsCount ?? "0"})",
                isFontBold: true,
                fontSize: 16,
                textColor: context.appColors.textPrimary,
              ),
            ],
          ).onTap(viewModel.gotoFollowingPage).expanded(),

          Container(
            width: 0.5,
            height: 50,
            color: context.appColors.dividerDefault,
          ),
          //粉丝
          Row(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              MyTextView(
                S.current.followers,
                isFontBold: true,
                fontSize: 16,
                textColor: context.appColors.textBlack,
              ),
              MyTextView(
                "(${userConfig.user?.flowersCount ?? "0"})",
                isFontBold: true,
                fontSize: 16,
                textColor: context.appColors.textPrimary,
              ),
            ],
          ).onTap(viewModel.gotoFollowerPage).expanded(),
        ],
      ),
    );
  }

  // 编辑顶部的个人信息
  Widget _buildTopProfile(BuildContext context, WidgetRef ref) {
    final viewModel = ref.watch(meViewModelProvider.notifier);
    final userConfig = UserConfigService.getState(ref: ref);

    return Container(
      color: context.appColors.btnBgDefault,
      width: double.infinity,
      padding: const EdgeInsets.only(left: 26, right: 20, top: 5),
      height: 120,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          MyLoadImage(
            userConfig.user?.avatar,
            width: 80,
            height: 80,
            isCircle: true,
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  MyTextView(
                    userConfig.user?.name ?? "-",
                    textColor: Colors.white,
                    fontSize: 18,
                    isFontMedium: true,
                  ).expanded(),
                  const MyAssetImage(
                    Assets.mainMeEditIcon,
                    width: 20.5,
                    height: 20,
                  ).onTap(viewModel.gotoEditProfilePage, padding: 5),
                ],
              ),

              //电话
              MyTextView(
                "+${userConfig.user?.phone ?? "-"}",
                textColor: Colors.white,
                fontSize: 15,
                isFontRegular: true,
              ),

              //住宅
              MyTextView(
                userConfig.user?.defaultUnit?.address ?? "-",
                marginTop: 12,
                textColor: Colors.white,
                fontSize: 15,
                isFontRegular: true,
              ),
            ],
          ).marginOnly(left: 11).expanded(),
        ],
      ),
    );
  }
}