import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wow_english/common/extension/string_extension.dart';
import 'package:wow_english/common/widgets/textfield_customer_widget.dart';
import 'package:wow_english/login/loginpage/bloc/login_bloc.dart';
import 'package:wow_english/route/route.dart';

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => LoginBloc(),
      child: _buildLoginViewWidget(),
    );
  }

  Widget _buildLoginViewWidget() => BlocBuilder<LoginBloc,LoginState> (
    builder: (context, state) {
      final bloc = BlocProvider.of<LoginBloc>(context);
      return Scaffold(
        body: SafeArea(
          child: ListView(
            children: [
              Container(
                padding: EdgeInsets.only(top: 25.h),
                child: Stack(
                  children: [
                    Positioned(
                        right: 29.w,
                        child: GestureDetector(
                          onTap: () => bloc.add(ChangeLoginTypeEvent()),
                          child: Container(
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: AssetImage(
                                      'login_logo'.assetPng
                                  ),
                                  fit: BoxFit.fill
                              ),
                            ),
                            padding: const EdgeInsets.symmetric(horizontal: 18.0),
                            child:  Text(
                                bloc.loginType == LoginType.sms?'密码登陆':'验证码密码'
                            ),
                          ),
                        )
                    ),
                    Center(
                      child: Column(
                        children: [
                          Image.asset(
                            'wow_logo'.assetPng,
                            height: 81.h,
                            width: 131.w,
                          ),
                          Offstage(
                            offstage: bloc.loginType == LoginType.pwd,
                            child: _buildSmsViewWidget(),
                          ),
                          Offstage(
                            offstage: bloc.loginType == LoginType.sms,
                            child: _buildPwdViewWidget(),
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              GestureDetector(
                                onTap: () => bloc.add(AgreementChangeEvent()),
                                child: Icon(
                                    bloc.agreement ? Icons.check_circle_outlined:Icons.circle_outlined,
                                    color:bloc.agreement ? Colors.green:Colors.black),
                              ),
                              6.horizontalSpace,
                              RichText(
                                text: TextSpan(
                                    children:[
                                      const TextSpan(
                                          text: '我已阅读并同意',
                                          style: TextStyle(
                                            fontSize: 12,
                                            color: Color(0xFF333333),
                                          )
                                      ),
                                      TextSpan(
                                          text: '《用户隐私协议》',
                                          style: const TextStyle(
                                            fontSize: 12,
                                            color: Color(0xFF333333),
                                          ),
                                          recognizer: TapGestureRecognizer()..onTap = (){
                                            Navigator.of(context).pushNamed(
                                                AppRouteName.webView,
                                                arguments: {
                                                  'urlStr':'https://www.zhihu.com',
                                                  'webViewTitle':'用户隐私协议'
                                                });
                                          }),
                                      const TextSpan(
                                          text: '，',
                                          style: TextStyle(
                                              fontSize: 12,
                                              color: Color(0xFF333333)
                                          )
                                      ),
                                      TextSpan(
                                          text: '《儿童隐私政策》',
                                          style: const TextStyle(
                                              fontSize: 12,
                                              color: Color(0xFF333333)
                                          ),
                                          recognizer: TapGestureRecognizer()..onTap = (){
                                            Navigator.of(context).pushNamed(
                                                AppRouteName.webView,
                                                arguments: {
                                                  'urlStr':'https://www.zhihu.com',
                                                  'webViewTitle':'儿童隐私协议'
                                                });
                                          })
                                    ]
                                ),
                              )
                            ],
                          ),
                          GestureDetector(
                            onTap: () {
                              if (bloc.canLogin) {
                                bloc.add(RequestLoginEvent());
                              }
                            },
                            child: Container(
                              decoration: BoxDecoration(
                                image: DecorationImage(
                                    image: AssetImage(
                                        bloc.canLogin?'login_enter'.assetPng:'login_enter_dis'.assetPng
                                    ),
                                    fit: BoxFit.fill
                                ),
                              ),
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 28.0,
                                  vertical: 14.0
                              ),
                              child:  const Text(
                                  '登录'
                              ),
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      );
    },
  );

  Widget _buildSmsViewWidget()=> BlocBuilder<LoginBloc,LoginState>(
      builder: (context,state){
        final bloc = BlocProvider.of<LoginBloc>(context);
        return Padding(
          padding: EdgeInsets.symmetric(horizontal: 135.w),
          child: Column(
            children: [
              15.verticalSpace,
              TextFieldCustomerWidget(
                height: 55.h,
                hitText: '请输入手机号',
                textInputType: TextInputType.phone,
                bgImageName: 'Input_layer_up',
                onChangeValue: (String value) {
                  bloc.add(PhoneNumChangeEvent());
                },
                controller: bloc.phoneNumController,
              ),
              6.5.verticalSpace,
              const Text('未注册用户登录默认注册'),
              4.5.verticalSpace,
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                      child: TextFieldCustomerWidget(
                        height: 50.h,
                        hitText: '请输入验证码',
                        textInputType: TextInputType.number,
                        bgImageName: 'Input_layer_down',
                        onChangeValue: (String value) {
                          bloc.add(CheckFieldChangeEvent());
                        },
                        controller: bloc.checkNumController,
                      )
                  ),
                  GestureDetector(
                    onTap: () {
                      if (bloc.canSendSms) {
                        bloc.add(CountDownEvent());
                      }
                    },
                    child: Container(
                      decoration: BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                                bloc.canSendSms?'securitycode'.assetPng:'securitycode_dis'.assetPng
                            ),
                            fit: BoxFit.fill
                        ),
                      ),
                      padding: const EdgeInsets.symmetric(horizontal:12.0,vertical: 15.0),
                      child:  Text(
                          !bloc.sendSmsIng  ? '获取验证码':'${bloc.countDown}s后在次获取'
                      ),
                    ),
                  )
                ],
              )
            ],
          ),
        );
      });

  Widget _buildPwdViewWidget()=> BlocBuilder<LoginBloc,LoginState>(
      builder: (context,state){
        final bloc = BlocProvider.of<LoginBloc>(context);
        return Padding(
          padding: EdgeInsets.symmetric(horizontal: 90.w),
          child: Column(
            children: [
              15.verticalSpace,
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    'phone'.assetPng,
                    height: 45.h,
                    width: 35.w,
                  ),
                  10.5.horizontalSpace,
                  Expanded(
                      child: TextFieldCustomerWidget(
                        height: 50.h,
                        hitText: '请输入手机号',
                        textInputType: TextInputType.phone,
                        bgImageName: 'Input_layer_up',
                        onChangeValue: (String value) {
                          bloc.add(PhoneNumChangeEvent());
                        },
                        controller: bloc.phoneNumController,
                      )
                  ),
                  5.horizontalSpace,
                  SizedBox(
                    width: 100.w,
                    height: 55.h,
                  )
                ],
              ),
              12.verticalSpace,
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    'lock'.assetPng,
                    height: 34.h,
                    width: 31.w,
                  ),
                  10.5.horizontalSpace,
                  Expanded(
                      child: TextFieldCustomerWidget(
                        hitText: '请输入密码',
                        bgImageName: 'Input_layer_down',
                        onChangeValue: (String value) {
                          bloc.add(CheckFieldChangeEvent());
                        },
                        controller: bloc.checkNumController,
                      )
                  ),
                  5.horizontalSpace,
                  GestureDetector(
                    onTap: () {
                      Navigator.of(context).pushNamed(AppRouteName.fogPwd);
                    },
                    child: Container(
                      width: 100.w,
                      height: 55.h,
                      alignment: Alignment.centerLeft,
                      child: const Text(
                          '忘记密码 ?'
                      ),
                    ),
                  )
                ],
              )
            ],
          ),
        );
      });
}

// class LoginPage extends StatefulWidget {
//   const LoginPage({super.key});
//
//   @override
//   State<StatefulWidget> createState() {
//     return _LoginPageState();
//   }
//
// }
//
// class _LoginPageState extends State<LoginPage> {
//   late Timer _timer;
//   int _countdownTime = 0;
//
//   void startCountdownTimer(BuildContext context) {
//     final bloc = BlocProvider.of<LoginBloc>(context);
//     if (bloc.sendSmsIng) {
//       return;
//     }
//     bloc.add(CancelCountDownEvent());
//     const oneSec = Duration(seconds: 1);
//     _countdownTime = 60;
//     _timer = Timer.periodic(oneSec,(timer) {
//       setState(() {
//         if (_countdownTime < 1) {
//           bloc.add(CancelCountDownEvent());
//           _timer.cancel();
//         } else {
//           _countdownTime = _countdownTime - 1;
//         }
//       });
//       if (kDebugMode) {
//         print(_countdownTime);
//       }
//     });
//   }
//
//
//
//   @override
//   Widget build(BuildContext context) {
//     return BlocProvider(
//       create: (context) => LoginBloc(),
//       child: _buildLoginViewWidget(),
//     );
//   }
//
//   Widget _buildLoginViewWidget() => BlocBuilder<LoginBloc,LoginState> (
//     builder: (context, state) {
//       final bloc = BlocProvider.of<LoginBloc>(context);
//       return Scaffold(
//         body: SafeArea(
//           child: ListView(
//             children: [
//               Container(
//                 padding: EdgeInsets.only(top: 25.h),
//                 child: Stack(
//                   children: [
//                     Positioned(
//                         right: 29.w,
//                         child: GestureDetector(
//                           onTap: () => bloc.add(ChangeLoginTypeEvent()),
//                           child: Container(
//                             decoration: BoxDecoration(
//                               image: DecorationImage(
//                                   image: AssetImage(
//                                       'login_logo'.assetPng
//                                   ),
//                                   fit: BoxFit.fill
//                               ),
//                             ),
//                             padding: const EdgeInsets.symmetric(horizontal: 18.0),
//                             child:  Text(
//                                 bloc.loginType == LoginType.sms?'密码登陆':'验证码密码'
//                             ),
//                           ),
//                         )
//                     ),
//                     Center(
//                       child: Column(
//                         children: [
//                           Image.asset(
//                             'wow_logo'.assetPng,
//                             height: 81.h,
//                             width: 131.w,
//                           ),
//                           Offstage(
//                             offstage: bloc.loginType == LoginType.pwd,
//                             child: _buildSmsViewWidget(),
//                           ),
//                           Offstage(
//                             offstage: bloc.loginType == LoginType.sms,
//                             child: _buildPwdViewWidget(),
//                           ),
//                           Row(
//                             mainAxisAlignment: MainAxisAlignment.center,
//                             children: [
//                               GestureDetector(
//                                 onTap: () => bloc.add(AgreementChangeEvent()),
//                                 child: Icon(
//                                     bloc.agreement ? Icons.check_circle_outlined:Icons.circle_outlined,
//                                     color:bloc.agreement ? Colors.green:Colors.black),
//                               ),
//                               6.horizontalSpace,
//                               RichText(
//                                 text: TextSpan(
//                                     children:[
//                                       const TextSpan(
//                                           text: '我已阅读并同意',
//                                           style: TextStyle(
//                                             fontSize: 12,
//                                             color: Color(0xFF333333),
//                                           )
//                                       ),
//                                       TextSpan(
//                                           text: '《用户隐私协议》',
//                                           style: const TextStyle(
//                                             fontSize: 12,
//                                             color: Color(0xFF333333),
//                                           ),
//                                           recognizer: TapGestureRecognizer()..onTap = (){
//                                             Navigator.of(context).pushNamed(
//                                                 AppRouteName.webView,
//                                                 arguments: {
//                                                   'urlStr':'https://www.zhihu.com',
//                                                   'webViewTitle':'用户隐私协议'
//                                                 });
//                                           }),
//                                       const TextSpan(
//                                           text: '，',
//                                           style: TextStyle(
//                                               fontSize: 12,
//                                               color: Color(0xFF333333)
//                                           )
//                                       ),
//                                       TextSpan(
//                                           text: '《儿童隐私政策》',
//                                           style: const TextStyle(
//                                               fontSize: 12,
//                                               color: Color(0xFF333333)
//                                           ),
//                                           recognizer: TapGestureRecognizer()..onTap = (){
//                                             Navigator.of(context).pushNamed(
//                                                 AppRouteName.webView,
//                                                 arguments: {
//                                                   'urlStr':'https://www.zhihu.com',
//                                                   'webViewTitle':'儿童隐私协议'
//                                                 });
//                                           })
//                                     ]
//                                 ),
//                               )
//                             ],
//                           ),
//                           GestureDetector(
//                             onTap: () {
//                               if (bloc.canLogin) {
//                                 bloc.add(RequestLoginEvent());
//                               }
//                             },
//                             child: Container(
//                               decoration: BoxDecoration(
//                                 image: DecorationImage(
//                                     image: AssetImage(
//                                         bloc.canLogin?'login_enter'.assetPng:'login_enter_dis'.assetPng
//                                     ),
//                                     fit: BoxFit.fill
//                                 ),
//                               ),
//                               padding: const EdgeInsets.symmetric(
//                                   horizontal: 28.0,
//                                   vertical: 14.0
//                               ),
//                               child:  const Text(
//                                   '登录'
//                               ),
//                             ),
//                           )
//                         ],
//                       ),
//                     )
//                   ],
//                 ),
//               )
//             ],
//           ),
//         ),
//       );
//     },
//   );
//
//   Widget _buildSmsViewWidget()=> BlocBuilder<LoginBloc,LoginState>(
//       builder: (context,state){
//         final bloc = BlocProvider.of<LoginBloc>(context);
//         return Padding(
//           padding: EdgeInsets.symmetric(horizontal: 135.w),
//           child: Column(
//             children: [
//               15.verticalSpace,
//               TextFieldCustomerWidget(
//                 height: 55.h,
//                 hitText: '请输入手机号',
//                 textInputType: TextInputType.phone,
//                 bgImageName: 'Input_layer_up',
//                 onChangeValue: (String value) {
//                   bloc.add(PhoneNumChangeEvent());
//                 },
//                 controller: bloc.phoneNumController,
//               ),
//               6.5.verticalSpace,
//               const Text('未注册用户登录默认注册'),
//               4.5.verticalSpace,
//               Row(
//                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
//                 children: [
//                   Expanded(
//                       child: TextFieldCustomerWidget(
//                         height: 50.h,
//                         hitText: '请输入验证码',
//                         textInputType: TextInputType.number,
//                         bgImageName: 'Input_layer_down',
//                         onChangeValue: (String value) {
//                           bloc.add(CheckFieldChangeEvent());
//                         },
//                         controller: bloc.checkNumController,
//                       )
//                   ),
//                   GestureDetector(
//                     onTap: () {
//                       if (bloc.canSendSms) {
//
//                       }
//                     },
//                     child: Container(
//                       decoration: BoxDecoration(
//                         image: DecorationImage(
//                             image: AssetImage(
//                                 bloc.canSendSms?'securitycode'.assetPng:'securitycode_dis'.assetPng
//                             ),
//                             fit: BoxFit.fill
//                         ),
//                       ),
//                       padding: const EdgeInsets.symmetric(horizontal:12.0,vertical: 15.0),
//                       child:  Text(
//                           !bloc.sendSmsIng  ? '获取验证码':'${bloc.countDown}s后在次获取'
//                       ),
//                     ),
//                   )
//                 ],
//               )
//             ],
//           ),
//         );
//       });

  // Widget _buildPwdViewWidget()=> BlocBuilder<LoginBloc,LoginState>(
  //     builder: (context,state){
  //       final bloc = BlocProvider.of<LoginBloc>(context);
  //       return Padding(
  //         padding: EdgeInsets.symmetric(horizontal: 90.w),
  //         child: Column(
  //           children: [
  //             15.verticalSpace,
  //             Row(
  //               mainAxisAlignment: MainAxisAlignment.center,
  //               children: [
  //                 Image.asset(
  //                   'phone'.assetPng,
  //                   height: 45.h,
  //                   width: 35.w,
  //                 ),
  //                 10.5.horizontalSpace,
  //                 Expanded(
  //                     child: TextFieldCustomerWidget(
  //                       height: 50.h,
  //                       hitText: '请输入手机号',
  //                       textInputType: TextInputType.phone,
  //                       bgImageName: 'Input_layer_up',
  //                       onChangeValue: (String value) {
  //                         bloc.add(PhoneNumChangeEvent());
  //                       },
  //                       controller: bloc.phoneNumController,
  //                     )
  //                 ),
  //                 5.horizontalSpace,
  //                 SizedBox(
  //                   width: 100.w,
  //                   height: 55.h,
  //                 )
  //               ],
  //             ),
  //             12.verticalSpace,
  //             Row(
  //               mainAxisAlignment: MainAxisAlignment.center,
  //               children: [
  //                 Image.asset(
  //                   'lock'.assetPng,
  //                   height: 34.h,
  //                   width: 31.w,
  //                 ),
  //                 10.5.horizontalSpace,
  //                 Expanded(
  //                     child: TextFieldCustomerWidget(
  //                       hitText: '请输入密码',
  //                       bgImageName: 'Input_layer_down',
  //                       onChangeValue: (String value) {
  //                         bloc.add(CheckFieldChangeEvent());
  //                       },
  //                       controller: bloc.checkNumController,
  //                     )
  //                 ),
  //                 5.horizontalSpace,
  //                 GestureDetector(
  //                   onTap: () {
  //                     Navigator.of(context).pushNamed(AppRouteName.fogPwd);
  //                   },
  //                   child: Container(
  //                     width: 100.w,
  //                     height: 55.h,
  //                     alignment: Alignment.centerLeft,
  //                     child: const Text(
  //                         '忘记密码 ?'
  //                     ),
  //                   ),
  //                 )
  //               ],
  //             )
  //           ],
  //         ),
  //       );
  //     });