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/blocs/cachebloc/cache_bloc.dart';
import 'package:wow_english/common/core/app_consts.dart';
import 'package:wow_english/common/extension/string_extension.dart';
import 'package:wow_english/common/widgets/textfield_customer_widget.dart';
import 'package:wow_english/pages/login/loginpage/time_widget.dart';
import 'package:wow_english/route/route.dart';

import 'bloc/login_bloc.dart';

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

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

class _LoginPageView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<LoginBloc, LoginState>(
      listener: (context, state) {
        if (state is LoginResultChangeState) {
          context.read<CacheBloc>().add(UserInfoChangeEvent(state.userEntity));
          Navigator.of(context).pushNamed(AppRouteName.home);
          // Navigator.of(context).pushNamedAndRemoveUntil(AppRouteName.home, (route) => false);
        }
      },
      child: _buildLoginViewWidget(),
    );
  }

  Widget _buildLoginViewWidget() => BlocBuilder<LoginBloc, LoginState>(
        builder: (context, state) {
          final bloc = BlocProvider.of<LoginBloc>(context);
          return Scaffold(
            body: SafeArea(
              child: SingleChildScrollView(
                child: 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: EdgeInsets.symmetric(horizontal: 18.w, vertical: 5.h),
                              child: Text(
                                bloc.isSmsLoginType ? '密码登陆' : '验证码密码',
                                style: TextStyle(fontSize: 16.sp),
                              ),
                            ),
                          )),
                      Center(
                        child: Column(
                          children: [
                            Image.asset(
                              'wow_logo'.assetPng,
                              height: 81.h,
                              width: 131.w,
                            ),
                            Offstage(
                              offstage: !bloc.isSmsLoginType,
                              child: _buildSmsViewWidget(),
                            ),
                            Offstage(
                              offstage: bloc.isSmsLoginType,
                              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: [
                                    TextSpan(
                                        text: '我已阅读并同意',
                                        style: TextStyle(
                                          fontSize: 12.sp,
                                          color: const Color(0xFF333333),
                                        )),
                                    TextSpan(
                                        text: '《用户隐私协议》',
                                        style: TextStyle(
                                          fontSize: 12.sp,
                                          color: const Color(0xFF333333),
                                        ),
                                        recognizer: TapGestureRecognizer()
                                          ..onTap = () {
                                            Navigator.of(context).pushNamed(AppRouteName.webView, arguments: {
                                              'urlStr': AppConsts.userPrivacyPolicyUrl,
                                              'webViewTitle': '用户隐私协议'
                                            });
                                          }),
                                    TextSpan(
                                        text: '，', style: TextStyle(fontSize: 12.sp, color: const Color(0xFF333333))),
                                    TextSpan(
                                        text: '《儿童隐私政策》',
                                        style: TextStyle(fontSize: 12.sp, color: const Color(0xFF333333)),
                                        recognizer: TapGestureRecognizer()
                                          ..onTap = () {
                                            Navigator.of(context).pushNamed(AppRouteName.webView, arguments: {
                                              'urlStr': 'https://ishowedu-public-images.ishowedu.com/%E5%8F%A3%E8%AF%AD%E6%98%9F%E7%90%83%E5%84%BF%E7%AB%A5%E9%9A%90%E7%A7%81%E4%BF%9D%E6%8A%A4%E6%94%BF%E7%AD%96_iShowLD%E4%BF%AE%E8%AE%A2_20210913%281%29.html',
                                              '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: EdgeInsets.symmetric(horizontal: 28.w, vertical: 14.h),
                                child: Text(
                                  '登录',
                                  style: TextStyle(fontSize: 16.sp),
                                ),
                              ),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
          );
        },
      );

  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,
              Text(
                '未注册用户登录默认注册',
                style: TextStyle(fontSize: 12.sp, color: const Color(0xFF999999)),
              ),
              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,
                  )),
                  TimerWidget(
                    canSendSms: bloc.canSendSms,
                    sendSmsEvent: () => bloc.add(RequestSmsCodeEvent()),
                  )
                ],
              )
            ],
          ),
        );
      });

  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: Text(
                        '忘记密码 ?',
                        style: TextStyle(fontSize: 12.sp),
                      ),
                    ),
                  )
                ],
              )
            ],
          ),
        );
      });
}