import 'package:cpt_main/modules/demo_page.dart';
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: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 '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);

    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        "",
        showBackButton: false,
        backgroundColor: context.appColors.btnBgDefault,
        systemUiOverlayStyle: ThemeConfig.systemUiOverlayStyleLightThemeWhite,
      ),
      backgroundColor: context.appColors.backgroundDark,
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        physics: const BouncingScrollPhysics(),
        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(
                  "265",
                  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(
                  "2",
                  textColor: context.appColors.textPrimary,
                  fontSize: 20,
                  isFontMedium: true,
                ),
              ).onTap(viewModel.gotoMyHouseholdPage),

              //房产
              SettingItemContainer(
                title: S.current.estate,
                iconPath: Assets.mainMeEstateIcon,
                isShowMoreIcon: true,
                rightWidget: MyTextView(
                  "2",
                  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);
    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(
                "(26)",
                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(
                "(12)",
                isFontBold: true,
                fontSize: 16,
                textColor: context.appColors.textPrimary,
              ),
            ],
          ).onTap(viewModel.gotoFollowerPage).expanded(),
        ],
      ),
    );
  }

  // 编辑顶部的个人信息
  Widget _buildTopProfile(BuildContext context, WidgetRef ref) {
    final viewModel = ref.watch(meViewModelProvider.notifier);
    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(
            "https://img1.baidu.com/it/u=1656098746,3560654086&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800",
            width: 80,
            height: 80,
            isCircle: true,
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  MyTextView(
                    "Wu Bing Bing",
                    textColor: Colors.white,
                    fontSize: 18,
                    isFontMedium: true,
                  ).expanded(),
                  const MyAssetImage(
                    Assets.mainMeEditIcon,
                    width: 20.5,
                    height: 20,
                  ).onTap(viewModel.gotoEditProfilePage, padding: 5),
                ],
              ),

              //电话
              MyTextView(
                "+86 12345678901",
                textColor: Colors.white,
                fontSize: 15,
                isFontRegular: true,
              ),

              //住宅
              MyTextView(
                "Owner135 #08-29",
                marginTop: 12,
                textColor: Colors.white,
                fontSize: 15,
                isFontRegular: true,
              ),
            ],
          ).marginOnly(left: 11).expanded(),
        ],
      ),
    );
  }
}