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:plugin_platform/engine/toast/toast_engine.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:shared/utils/date_time_utils.dart';
import 'package:shared/utils/util.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_view.dart';
import 'package:widgets/shatter/form_require_text.dart';
import 'package:widgets/shatter/picker_container.dart';
import '../../router/page/form_page_router.dart';
import 'vm/apply_view_model.dart';

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

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

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

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

      return () {
        // 组件卸载时执行
      };
    }, []);

    return WillPopScope(
        child: Scaffold(
            appBar: MyAppBar.appBar(context, state.detailPage?['title']),
            backgroundColor: context.appColors.backgroundWhite,
            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: [
                        //下拉选 - 开始时间
                        FormRequireText(
                          text: S.current.renovation_start_date,
                          textColor: context.appColors.textBlack,
                          fontSize: 17,
                          fontWeight: FontWeight.w500,
                        ).marginOnly(top: 30, bottom: 16, left: 15, right: 15),

                        PickerContainer(
                          hint: S.current.choose_date,
                          enable: state.enableEdit,
                          content: state.formContentDetail.renovationStartDate,
                          onClick: () {
                            viewModel.pickDate(null, (date) {
                              viewModel.updateFormContentDetail((content) {
                                content.renovationStartDate = DateTimeUtils.formatDate(date, format: 'yyyy-MM-dd');
                              });
                            });
                          },
                        ).marginOnly(left: 15, right: 15),

                        //下拉选 - 结束时间
                        FormRequireText(
                          text: S.current.renovation_end_date,
                          textColor: context.appColors.textBlack,
                          fontSize: 17,
                          fontWeight: FontWeight.w500,
                        ).marginOnly(top: 14, bottom: 16, left: 15, right: 15),

                        PickerContainer(
                          hint: S.current.choose_date,
                          enable: state.enableEdit,
                          content: state.formContentDetail.renovationEndDate,
                          onClick: () {
                            viewModel.pickDate(null, (date) {
                              viewModel.updateFormContentDetail((content) {
                                content.renovationEndDate = DateTimeUtils.formatDate(date, format: 'yyyy-MM-dd');
                              });
                            });
                          },
                        ).marginOnly(left: 15, right: 15),

                        //下拉选 - 施工时间开始时间
                        MyTextView(
                          S.current.hacking_start_date,
                          fontSize: 17,
                          marginTop: 14,
                          marginLeft: 15,
                          marginBottom: 16,
                          isFontMedium: true,
                          textColor: context.appColors.textBlack,
                        ),

                        PickerContainer(
                          hint: S.current.choose_date,
                          enable: state.enableEdit,
                          content: state.formContentDetail.hackingStartDate,
                          onClick: () {
                            viewModel.pickDate(null, (date) {
                              viewModel.updateFormContentDetail((content) {
                                content.hackingStartDate = DateTimeUtils.formatDate(date, format: 'yyyy-MM-dd');
                              });
                            });
                          },
                        ).marginOnly(left: 15, right: 15),

                        //下拉选 - 施工时间结束时间
                        MyTextView(
                          S.current.hacking_end_date,
                          fontSize: 17,
                          marginTop: 14,
                          marginLeft: 15,
                          marginBottom: 16,
                          isFontMedium: true,
                          textColor: context.appColors.textBlack,
                        ),

                        PickerContainer(
                          hint: S.current.choose_date,
                          enable: state.enableEdit,
                          content: state.formContentDetail.hackingEndDate,
                          onClick: () {
                            viewModel.pickDate(null, (date) {
                              viewModel.updateFormContentDetail((content) {
                                content.hackingEndDate = DateTimeUtils.formatDate(date, format: 'yyyy-MM-dd');
                              });
                            });
                          },
                        ).marginOnly(left: 15, right: 15),
                      ],
                    ),
                  ),
                ).expanded(),

                //底部按钮
                MyButton(
                  onPressed: () {
                    if (state.enableEdit) {
                      //校验数据
                      final startDate = state.formContentDetail.renovationEndDate;
                      final endDate = state.formContentDetail.renovationEndDate;

                      if (Utils.isEmpty(startDate)) {
                        ToastEngine.show("Select Renovation Start Date");
                        return;
                      }

                      if (Utils.isEmpty(endDate)) {
                        ToastEngine.show("Select Renovation End Date");
                        return;
                      }
                    }

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