import 'package:fis_common/helpers/color.dart';
import 'package:fis_i18n/i18n.dart';
import 'package:fis_ui/index.dart';
import 'package:fis_theme/theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flyinsono/architecture/define.dart';
import 'package:flyinsono/architecture/router/index.dart';
import 'package:flyinsono/architecture/temp_cache.dart';
import 'package:flyinsono/pages/components/select.dart';
import 'package:flyinsono/pages/index.dart';
import 'package:flyinsono/pages/user/role_authentication/widget/dotted_line.dart';

///角色卡片
class RoleCard extends StatefulWidget implements FWidget {
  ///起始颜色
  final Color startColor;

  ///末尾颜色
  final Color endColor;

  //角色图标志
  final FWidget icon;

  ///角色类别
  final String roleType;

  ///角色Code
  final String roleCode;

  ///描述集合
  final List<String> descList;

  ///宽度
  final double width;

  ///高度
  final double height;

  RoleCard({
    required this.startColor,
    required this.endColor,
    required this.icon,
    required this.roleType,
    required this.roleCode,
    this.descList = const [],
    this.height = 520,
    this.width = 280,
  });

  @override
  State<StatefulWidget> createState() => _RoleCardState();
}

class _RoleCardState extends State<RoleCard> {
  final double height = kIsMobile ? 180.sp : 240.sp;
  bool hovering = false;
  double scale = 1;

  @override
  void initState() {
    super.initState();
  }

  @override
  FWidget build(BuildContext context) {
    final List<FWidget> descLines = _buildChildren();
    return QuickFWidget(
      AspectRatio(
        aspectRatio: 2,
        child: FInkWell(
          splashColor: Colors.transparent,
          hoverColor: Colors.white,
          highlightColor: Colors.transparent,
          onTap: () {
            _applyIdAuth(widget.roleCode);
          },
          child: FMouseRegion(
            onEnter: (e) {
              setState(() {
                scale = 1.1;
              });
            },
            onExit: (e) {
              setState(() {
                scale = 1;
              });
            },
            child: QuickFWidget(
              AnimatedContainer(
                duration: const Duration(milliseconds: 200),
                transform: Matrix4.diagonal3Values(scale, scale, 1),
                transformAlignment: Alignment.center,
                child: Container(
                  decoration: _buildBoxDecoration(),
                  child: FRow(
                    children: [
                      FSizedBox(
                          width:
                              !kIsMobile || i18nBook.isCurrentChinese ? 15 : 5),
                      FColumn(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          _buildRoleIcon(),
                          FSizedBox(height: 15.sp),
                          _buildRoleType(),
                        ],
                      ),
                      FSizedBox(
                          width:
                              !kIsMobile || i18nBook.isCurrentChinese ? 20 : 0),
                      _verticalDottedLine(),
                      FSizedBox(width: kIsMobile ? 20.sp : 40.sp),
                      FExpanded(
                        child: FColumn(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            FRow(
                              children: [
                                FText(
                                  i18nBook.user.equity.t,
                                  style: TextStyle(
                                    fontSize: kIsMobile ? 16.sp : 18.sp,
                                    color: widget.endColor,
                                  ),
                                ),
                                FSizedBox(width: 10.sp),
                                _buildVipIcon(),
                              ],
                            ),
                            ...descLines,
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  /// 申请认证
  Future<void> _applyIdAuth(String roleCode) async {
    // 新申请
    if (kIsMobile) {
      if (TempCache.inIdentityReselecting) {
        // 重选角色
        return router.back(
          result: roleCode,
          id: kIsMobile ? null : NavIds.HOME,
        );
      } else {
        final result = await router
            .to(RouteNames.User.RoleApply, parameters: {"code": roleCode});
        if (result is bool && result) {
          router.back();
        }
      }
    } else {
      router.dialog(
        () => UserIdAuthApplyPage(),
        binding: UserIdAuthApplyBinding(),
        dismissible: false,
        parameters: {"code": roleCode},
      );

      if (TempCache.inIdentityReselecting) {
        // 重选角色
        router.back(id: NavIds.HOME);
      }
    }
  }

  ///边框及背景色
  BoxDecoration _buildBoxDecoration() {
    return BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(8.0)),
      border: new Border.all(
        width: 1,
        color: FColorHelper.mixColor(
          Colors.black,
          widget.endColor,
          25,
        ),
      ),
      gradient: LinearGradient(
        colors: [widget.startColor, widget.endColor],
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
      ),
      image: DecorationImage(
        image: AssetImage("assets/images/transparentSurface.png"),
        alignment: Alignment.bottomCenter,
        scale: 0.5,
        fit: BoxFit.fitWidth,
      ),
    );
  }

  ///描述认证内容，竖向多行排放
  List<FWidget> _buildChildren() {
    final textStyle = TextStyle(
      color: Colors.black87,
      fontSize: kIsMobile ? 14.sp : 16.sp,
      height: kIsMobile ? 1.2 : 1.8,
      fontFamily: FTheme.ins.localeSetting.fontFamily,
      fontFamilyFallback: [
        FTheme.ins.data.localeSettings.chinese.fontFamily,
      ],
    );
    final List<FWidget> descLines = [];
    final descLen = widget.descList.length;

    for (var i = 0; i < descLen; i++) {
      descLines.add(
        OverflowDetectorText(
            child: FText(
          widget.descList[i],
          style: textStyle,
          maxLines: kIsMobile ? 2 : 1,
          overflow: TextOverflow.ellipsis,
        )),
      );
    }
    return descLines;
  }

  ///角色图标
  FWidget _buildRoleIcon() {
    return FContainer(
      height: 50.sp,
      width: 50.sp,
      child: FClipOval(
        child: widget.icon,
      ),
    );
  }

  ///角色类型
  FWidget _buildRoleType() {
    return FContainer(
      width: 90.sp,
      alignment: Alignment.center,
      child: FText(
        widget.roleType,
        textAlign: TextAlign.center,
        style: TextStyle(
          fontSize: kIsMobile ? 14.sp : 16.sp,
          color: widget.endColor,
        ),
      ),
    );
  }

  ///Vip图标
  FWidget _buildVipIcon() {
    return FIcon(
      FIcons.vip,
      color: widget.endColor,
      size: 20,
    );
  }

  ///竖直虚线
  FWidget _verticalDottedLine() {
    return QuickFWidget(
      Container(
        padding: EdgeInsets.symmetric(vertical: 20),
        child: DottedLine(
          width: 2,
          height: double.infinity,
          strokeWidth: 1,
          color: widget.endColor,
          direction: DottedLineDirection.vertical,
        ),
      ),
    );
  }
}
