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:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:shared/utils/log_utils.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_appbar.dart';
import 'package:widgets/my_button.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_field.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/widget_export.dart';

import '../../router/page/auth_page_router.dart';
import 'select_unit_state.dart';
import 'select_unit_view_model.dart';

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

  //启动当前页面
  static void startInstance({BuildContext? context}) {
    if (context != null) {
      context.router.push(SelectUnitPageRoute());
    } else {
      appRouter.push(SelectUnitPageRoute());
    }
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final viewModel = ref.watch(selectUnitViewModelProvider.notifier);
    final state = ref.watch(selectUnitViewModelProvider);

    return Scaffold(
      appBar: MyAppBar.appBar(context, S.current.yy_home_accounts),
      backgroundColor: context.appColors.backgroundDefault,
      body: Container(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        width: double.infinity,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SingleChildScrollView(
                scrollDirection: Axis.vertical,
                physics: const BouncingScrollPhysics(),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    //顶部图片
                    const MyAssetImage(
                      Assets.authSignUpUnitImg,
                      width: 266.5,
                      height: 162,
                    ).marginOnly(top: 28, bottom: 18),

                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        //街区
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            MyTextView(
                              S.current.block,
                              marginBottom: 9,
                              textColor: context.appColors.textBlack,
                              fontSize: 16,
                              isFontMedium: true,
                            ),

                            // 表单 - 街区
                            _buildInputLayout(
                              context,
                              state,
                              "block",
                              textInputAction: TextInputAction.next,
                              onSubmit: (formKey, value) {
                                state.formData[formKey]!['focusNode'].unfocus();
                                FocusScope.of(context).requestFocus(state.formData['unit']!['focusNode']);
                              },
                            ).constrained(width: 88),
                          ],
                        ),

                        MyTextView(
                          "#",
                          marginTop: 20,
                          marginLeft: 8.5,
                          marginRight: 8.5,
                          textColor: context.appColors.textBlack,
                          fontSize: 16,
                          isFontMedium: true,
                        ),

                        //单元
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            MyTextView(
                              S.current.unit_number,
                              marginBottom: 9,
                              textColor: context.appColors.textBlack,
                              fontSize: 16,
                              isFontMedium: true,
                            ),
                            Row(
                              children: [
                                // 表单 - 单元
                                _buildInputLayout(
                                  context,
                                  state,
                                  "unit",
                                  textInputAction: TextInputAction.next,
                                  onSubmit: (formKey, value) {
                                    state.formData[formKey]!['focusNode'].unfocus();
                                    FocusScope.of(context).requestFocus(state.formData['room']!['focusNode']);
                                  },
                                ).constrained(width: 83),

                                MyTextView(
                                  "-",
                                  textColor: context.appColors.textBlack,
                                  marginLeft: 4,
                                  marginRight: 4,
                                  isFontMedium: true,
                                ),

                                // 表单 - 房号
                                _buildInputLayout(
                                  context,
                                  state,
                                  "room",
                                  textInputAction: TextInputAction.done,
                                  onSubmit: (formKey, value) {
                                    state.formData[formKey]!['focusNode'].unfocus();
                                  },
                                ).constrained(width: 83),
                              ],
                            ),
                          ],
                        ),
                      ],
                    ),

                    MyTextView(
                      S.current.block_desc,
                      fontSize: 15,
                      marginTop: 25,
                      textAlign: TextAlign.center,
                      isFontMedium: true,
                      textColor: context.appColors.textBlack,
                    ),

                    MyTextView(
                      S.current.block_example,
                      fontSize: 15,
                      marginTop: 20,
                      textAlign: TextAlign.center,
                      isFontMedium: true,
                      textColor: context.appColors.textBlack,
                    ),

                    MyTextView(
                      S.current.block_example_desc,
                      fontSize: 15,
                      marginTop: 20,
                      textAlign: TextAlign.center,
                      isFontMedium: true,
                      textColor: context.appColors.textBlack,
                    ),
                  ],
                )).expanded(),

            MyButton(
              onPressed: viewModel.submitUnit,
              text: S.current.next,
              textColor: Colors.white,
              backgroundColor: context.appColors.btnBgDefault,
              fontWeight: FontWeight.w500,
              type: ClickType.throttle,
              fontSize: 16,
              minHeight: 50,
              radius: 5,
            ).marginOnly(top: 50, bottom: 50, left: 18, right: 18),
          ],
        ),
      ),
    );
  }

  /// 输入框
  Widget _buildInputLayout(
    BuildContext context,
    SelectUnitState state,
    String key, {
    double marginTop = 0,
    bool? showRightIcon = false, //是否展示右侧的布局
    Widget? rightWidget, //右侧的布局
    TextInputType textInputType = TextInputType.number,
    String? errorText,
    bool obscureText = false,
    TextInputAction textInputAction = TextInputAction.done,
    Function? onSubmit,
  }) {
    return IgnoreKeyboardDismiss(
      child: MyTextField(
        key,
        fillBackgroundColor: context.appColors.authFiledBG,
        state.formData[key]!['value'],
        hintText: state.formData[key]!['hintText'],
        hintStyle: TextStyle(
          color: context.appColors.authFiledHint,
          fontSize: 16.0,
          fontWeight: FontWeight.w500,
        ),
        controller: state.formData[key]!['controller'],
        focusNode: state.formData[key]!['focusNode'],
        margin: EdgeInsets.only(top: marginTop),
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 3),
        showDivider: false,
        height: 44,
        style: TextStyle(
          color: context.appColors.authFiledText,
          fontSize: 16.0,
          fontWeight: FontWeight.w500,
        ),
        inputType: textInputType,
        textInputAction: textInputAction,
        onSubmit: onSubmit,
        cursorColor: context.appColors.authFiledText,
        obscureText: obscureText,
        errorText: errorText,
        showLeftIcon: true,
        showRightIcon: showRightIcon,
        rightWidget: rightWidget,
      ),
    );
  }
}