import 'package:cpt_form/modules/apply/vm/apply_view_model.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:widgets/ext/ex_widget.dart';
import 'package:widgets/my_appbar.dart';
import 'package:widgets/my_button.dart';
import 'package:widgets/my_text_field.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/shatter/form_require_text.dart';
import 'package:widgets/shatter/picker_container.dart';
import 'package:widgets/widget_export.dart';
import '../../router/page/form_page_router.dart';

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

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

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

    // 使用 useState 来持久化 TextEditingController 和 FocusNode
    final TextEditingController vehicleNumController = useTextEditingController();
    final TextEditingController iuNumController = useTextEditingController();
    final TextEditingController vehicleInfoController = useTextEditingController();
    final FocusNode vehicleNumFocusNode = useFocusNode();
    final FocusNode iuNumFocusNode = useFocusNode();
    final FocusNode vehicleInfoFocusNode = useFocusNode();


    useEffect(() {

      //赋值State的值
      Future.microtask(() {});

      return () {
        // 释放控制器资源
        vehicleNumController.dispose();
        iuNumController.dispose();
        vehicleInfoController.dispose();
        vehicleNumFocusNode.dispose();
        iuNumFocusNode.dispose();
        vehicleInfoFocusNode.dispose();
      };
    }, []);


    return WillPopScope(
        child: Scaffold(
            appBar: MyAppBar.appBar(context, state.applyDetail?['title']),
            backgroundColor: context.appColors.whiteBG,
            body: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  physics: const BouncingScrollPhysics(),
                  child: Container(
                    width: double.infinity,
                    child: Column(
                      mainAxisSize: MainAxisSize.max,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [

                        //下拉选 - Type类型
                        MyTextView(
                          S.current.type_of_application,
                          fontSize: 17,
                          marginTop: 30,
                          marginLeft: 15,
                          marginBottom: 16,
                          isFontMedium: true,
                          textColor: context.appColors.textBlack,
                        ),

                        PickerContainer(
                          hint: S.current.choose_an_option,
                          onClick: viewModel.pickOption,
                        ).marginOnly(left: 15, right: 15),

                        //下拉选 - 所有权状态
                        MyTextView(
                          S.current.ownership_status,
                          fontSize: 17,
                          marginTop: 14,
                          marginLeft: 15,
                          marginBottom: 16,
                          isFontMedium: true,
                          textColor: context.appColors.textBlack,
                        ),

                        PickerContainer(
                          hint: S.current.choose_an_option,
                          onClick: viewModel.pickOption,
                        ).marginOnly(left: 15, right: 15),


                        //输入框 - 车牌号
                        FormRequireText(
                          text: S.current.vehicle_number,
                          textColor: context.appColors.textBlack,
                          fontSize: 17,
                          fontWeight: FontWeight.w500,
                        ).marginOnly(top: 14,bottom: 16,left: 15,right: 15),

                        // 表单
                        _buildInputLayout(
                          context,
                          "vehicle_num",
                          textInputType: TextInputType.text,
                          textInputAction: TextInputAction.next,
                          controller: vehicleNumController,
                          focusNode: vehicleNumFocusNode,
                          onSubmit: (formKey, value) {
                            vehicleNumFocusNode.unfocus();
                            FocusScope.of(context).requestFocus(iuNumFocusNode);
                          },
                        ),

                        //输入框 - IU 号
                        MyTextView(
                          S.current.iu_number,
                          fontSize: 17,
                          marginTop: 14,
                          marginLeft: 15,
                          marginRight: 15,
                          marginBottom: 16,
                          isFontMedium: true,
                          textColor: context.appColors.textBlack,
                        ),

                        // 表单
                        _buildInputLayout(
                          context,
                          "iu_num",
                          textInputType: TextInputType.text,
                          textInputAction: TextInputAction.next,
                          controller: iuNumController,
                          focusNode: iuNumFocusNode,
                          onSubmit: (formKey, value) {
                            iuNumFocusNode.unfocus();
                            FocusScope.of(context).requestFocus(vehicleInfoFocusNode);
                          },
                        ),

                        //输入框 - 车辆信息
                        FormRequireText(
                          text: S.current.vehicle_make_model_colour,
                          textColor: context.appColors.textBlack,
                          fontSize: 17,
                          fontWeight: FontWeight.w500,
                        ).marginOnly(top: 14,bottom: 16,left: 15,right: 15),

                        // 表单
                        _buildInputLayout(
                          context,
                          "vehicle_info",
                          textInputType: TextInputType.text,
                          textInputAction: TextInputAction.done,
                          controller: vehicleInfoController,
                          focusNode: vehicleInfoFocusNode,
                          onSubmit: (formKey, value) {
                            vehicleInfoFocusNode.unfocus();
                          },
                        ),

                      ],
                    ),
                  ),
                ).expanded(),

                //底部按钮
                MyButton(
                  onPressed: (){
                    vehicleNumFocusNode.unfocus();
                    iuNumFocusNode.unfocus();
                    vehicleInfoFocusNode.unfocus();

                    viewModel.gotoNextPage();
                  },
                  text: S.current.next,
                  textColor: Colors.white,
                  backgroundColor: context.appColors.btnBgDefault,
                  fontWeight: FontWeight.w500,
                  type: ClickType.throttle,
                  fontSize: 16,
                  minHeight: 50,
                  radius: 0,
                ),
              ],
            )),
        onWillPop: () async {
          viewModel.handlePopAction();
          return true;
        });
  }

  Widget _buildInputLayout(
      BuildContext context,
      String key, {
        double marginTop = 0,
        bool? showRightIcon = false, //是否展示右侧的布局
        Widget? rightWidget, //右侧的布局
        TextInputType textInputType = TextInputType.text,
        String? errorText,
        bool obscureText = false,
        required TextEditingController controller,
        required FocusNode focusNode,
        bool enable = true,
        TextInputAction textInputAction = TextInputAction.done,
        Function? onSubmit,
      }) {
    return IgnoreKeyboardDismiss(
      child: MyTextField(
        key,
        fillBackgroundColor: context.appColors.authFiledBG,
        "",
        hintStyle: TextStyle(
          color: context.appColors.authFiledHint,
          fontSize: 16.0,
          fontWeight: FontWeight.w500,
        ),
        controller: controller,
        focusNode: focusNode,
        margin: EdgeInsets.only(top: marginTop,left: 15,right: 15),
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 3),
        showDivider: false,
        height: 44,
        enabled: enable,
        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,
      ),
    );
  }

}