import 'package:fis_i18n/i18n.dart';
import 'package:fis_jsonrpc/rpc.dart';
import 'package:fis_ui/index.dart';
import 'package:fis_ui/interface/interactive_container.dart';
import 'package:fis_ui/values/font_sizes.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flyinsono/architecture/define.dart';
import 'package:flyinsono/pages/upload/image_upload_card.dart';
import 'package:flyinsono/pages/user/user_center/controller.dart';
import 'package:fis_ui/widgets/layout/button_group.dart';
import 'package:fis_ui/values/paddings.dart';
import 'package:fis_ui/values/spacings.dart';
import 'package:flyinsono/pages/user/user_center/state.dart';

///头像区域（擅长领域及角色类型）
class AvatarPanel extends FisView<UserCenterController>
    implements FInteractiveContainer {
  final String pageName = 'AvatarPanel';

  @override
  FWidget build(BuildContext context) {
    return context.fResponsiveVoid(
      mobile: () => _MobileLayout(this),
      desktop: () => _DesktopLayout(this),
    );
  }
}

class _DesktopLayout extends FisView<UserCenterController> implements FWidget {
  ///父级组件
  FInteractiveContainer businessParent;
  final ScrollController _scrollController = ScrollController();
  ButtonStyle buttonStyle = ButtonStyle(
    fixedSize: MaterialStatePropertyAll(Size(32, 32)),
    padding: MaterialStatePropertyAll(EdgeInsets.all(0)),
  );
  _DesktopLayout(this.businessParent);
  @override
  FWidget build(BuildContext context) {
    return FRow(
      mainAxisSize: MainAxisSize.min,
      children: [
        _buildHeadImage(),
        FColumn(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildRoleApplayPanel(),
            FSizedBox(height: 4),
            _buildRoleStatePanel(),
            _buildRoleDescPanel(context),
            FSizedBox(height: 4),
          ],
        ),
      ],
    );
  }

  ///头像
  FWidget _buildHeadImage() {
    return FObx(
      () => FPadding(
        padding: const EdgeInsets.only(right: 10),
        child: ImageUploadCard(
          originImgUrl: controller.state.avatar,
          onUploaded: (url) {
            Future.microtask(() {
              controller.state.avatar = url;
              controller.updateAvatar();
            });
          },
          height: 70.sp,
          isCircleAvatar: true,
          hintText: "",
          width: 70.sp,
        ),
      ),
    );
  }

  ///认证区域，已认证则显示认证角色
  FWidget _buildRoleApplayPanel() {
    return FObx(
      () => FRow(
        mainAxisSize: MainAxisSize.min,
        children: [
          FSizedBox(
            child: FText(
              controller.state.displayName,
              overflow: TextOverflow.ellipsis,
              maxLines: 1,
              style: TextStyle(
                fontSize: 18,
                color: Colors.black87,
                // height: 2,
              ),
            ),
          ),
          FSizedBox(width: 5.sp),
          if (controller.state.idRolePassed) ...[
            FIcon(
              FIcons.vip,
              size: 20,
              color: controller.state.vipColor,
            ),
            FSizedBox(width: 5.sp),
          ],
          FButtonGroup(
              buttonPadding: FPaddings.MINI_BUTTON,
              spacing: FSpacings.MINI_BUTTON,
              children: [
                if (!controller.state.idRolePassed)
                  FElevatedButtonWithIcon(
                    name: "gotoIdRoleApply",
                    businessParent: businessParent,
                    onPressed: () {
                      controller.gotoIdRoleApply(businessParent);
                    },
                    icon: FIcon(FIcons.vip),
                    label: FObx(
                      () => FText(
                        controller.state.idRolePassed
                            ? i18nBook.user.viewAuthentication.t
                            : i18nBook.user.realNameAuthentication.t,
                      ),
                    ),
                    style: buttonStyle,
                  ),
                FElevatedButtonWithIcon(
                  name: i18nBook.setting.electronicSignature.t,
                  businessParent: businessParent,
                  onPressed: () {
                    controller.uploadSignatureImage();
                  },
                  icon: FIcon(FIcons.edit),
                  label: FText(
                    i18nBook.setting.electronicSignature.t,
                  ),
                  style: buttonStyle,
                ),
              ]),
        ],
      ),
    );
  }

  ///角色描述
  FWidget _buildRoleDescPanel(BuildContext context) {
    return FObx(
      () {
        if (controller.state.applyState != ApplyStateEnum.Passed ||
            controller.state.isGeneralUserRole) {
          return FText(
            i18nBook.user.realNameAuthenticationUnlockMoreRights.t,
            style: TextStyle(
              fontSize: 13,
              color: Colors.grey,
            ),
          );
        } else {
          return FRow(
            children: [
              if (controller.state.labels.length > 0) ...[
                FContainer(
                  height: 22,
                  margin: EdgeInsets.only(top: 5),
                  child: FText(
                    i18nBook.user.skilledAreaWithDevider.t,
                    style: TextStyle(
                      fontSize: FFontSizes.H6,
                      color: Colors.grey,
                    ),
                  ),
                ),
                FContainer(
                  margin: EdgeInsets.only(top: 5),
                  height: 22,
                  child: FSizedBox(
                    child: FAlwaysScrollListView(
                      scrollController: _scrollController,
                      child: QuickFWidget(ScrollConfiguration(
                        behavior: ScrollConfiguration.of(context)
                            .copyWith(scrollbars: false),
                        child: FListView.builder(
                          controller: _scrollController,
                          scrollDirection: Axis.horizontal,
                          itemCount: controller.state.labels.length,
                          shrinkWrap: true,
                          itemBuilder: (context, index) {
                            return FContainer(
                              margin: EdgeInsets.only(
                                right: 15,
                              ),
                              child: FText(
                                controller.state.labels[index],
                                style: TextStyle(
                                  fontSize: FFontSizes.H6,
                                  color: Colors.grey,
                                ),
                              ),
                            );
                          },
                        ),
                      )),
                    ),
                  ),
                ),
              ],
            ],
          );
        }
      },
    );
  }

  ///角色状态区域
  FWidget _buildRoleStatePanel() {
    return FObx(
      () => FRow(children: [
        FText(
          controller.state.idRoleStateDescription,
          style: TextStyle(
            fontSize: FFontSizes.H6,
            color: Colors.grey,
          ),
        ),
      ]),
    );
  }
}

class _MobileLayout extends FisView<UserCenterController> implements FWidget {
  ///父级组件
  FInteractiveContainer businessParent;
  _MobileLayout(this.businessParent);

  @override
  FWidget build(BuildContext context) {
    return FPadding(
      padding: EdgeInsets.only(left: 4, right: 4, top: 5),
      child: FRow(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          _buildAvatarBox(),
          FExpanded(
            child: FColumn(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                FSizedBox(height: 4),
                FContainer(
                  child: _buildRoleApplay(),
                ),
                FSizedBox(height: 4.sp),
                _buildRoleDesc(context),
              ],
            ),
          ),
        ],
      ),
    );
  }

  ///头像边框
  FWidget _buildAvatarBox() {
    return FObx(() {
      return FPadding(
        padding: EdgeInsets.only(right: 18.sp),
        child: ImageUploadCard(
          originImgUrl: controller.state.avatar,
          onUploaded: (url) {
            Future.microtask(() {
              controller.state.avatar = url;
              controller.updateAvatar();
            });
          },
          height: 70.sp,
          isCircleAvatar: true,
          hintText: "",
          width: 70.sp,
        ),
      );
    });
  }

  ///认证区域
  FWidget _buildRoleApplay() {
    return FRow(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        FExpanded(
          child: FObx(
            () => FText(
              controller.state.displayName,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: FFontSizes.H5.sp,
                color: Colors.black87,
              ),
            ),
          ),
        ),
        FObx(() {
          if (controller.state.idRolePassed) {
            return const FSizedBox();
          } else {
            return FContainer(
              margin:
                  EdgeInsets.only(right: i18nBook.isCurrentChinese ? 0 : 25),
              child: FPrimaryButton(
                height: 26.sp,

                /// TODO:[Gavin] 多语言-UI-整合
                width: i18nBook.isCurrentChinese
                    ? 90.sp
                    : i18nBook.isCurrentRussian
                        ? 135.sp
                        : 120.sp,
                text: i18nBook.user.realNameAuthentication.t,
                textSize: 12.sp,
                onPressed: () {
                  controller.gotoIdRoleApply(businessParent);
                },
              ),
            );
          }
        }),
      ],
    );
  }

  ///角色认证描述
  FWidget _buildRoleDesc(BuildContext context) {
    return FFlex(
      mainAxisAlignment: MainAxisAlignment.start,
      mainAxisSize: MainAxisSize.max,
      direction: i18nBook.isCurrentChinese ? Axis.horizontal : Axis.vertical,
      children: [
        FObx(
          () => FRow(
            children: [
              FText(
                controller.state.isGeneralUserRole
                    ? controller.state.roleName
                    : controller.state.idRoleStateDescription,
                style: TextStyle(fontSize: 14.sp),
              ),
              if (controller.state.idRolePassed)
                FIcon(
                  FIcons.vip,
                  size: 20,
                  color: controller.state.vipColor,
                )
            ],
          ),
        ),
        FContainer(
          margin: EdgeInsets.only(left: 3.sp),
          child: FObx(
            () => FText(
              controller.state.idRolePassed
                  ? ""
                  : i18nBook.user.realNameAuthenticationUnlockMoreRights.t,
              style: TextStyle(
                fontSize: 12.sp,
                color: Colors.grey,
              ),
            ),
          ),
        ),
      ],
    );
  }
}
