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:hooks_riverpod/hooks_riverpod.dart';
import 'package:router/ext/auto_router_extensions.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/shatter/picker_container.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 {

  const SelectUnitPage({Key? key,}) : super(key: key);

  //启动当前页面
  static void startInstance({BuildContext? context}) {
    if (context != null) {
      context.router.push(const SelectUnitPageRoute());
    } else {
      appRouter.push(const 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",
                    //           textInputType: TextInputType.text,
                    //           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),
                    //           ],
                    //         ),
                    //       ],
                    //     ),
                    //   ],
                    // ),

                    //选择
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        MyTextView(
                          S.current.unit_number,
                          marginBottom: 9,
                          marginLeft: 17,
                          textColor: context.appColors.textBlack,
                          fontSize: 16,
                          isFontMedium: true,
                        ),

                        PickerContainer(
                          hint: 'Please Select',
                          enable: true,
                          content: state.selectedUnitName ?? "",
                          onClick: (context) {
                            viewModel.pickUnit(context);
                          },
                        ).marginOnly(left: 17, right: 17),

                      ],
                    ),

                    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,
  //     ),
  //   );
  // }
}