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/route/route.dart';

import 'bloc/set_pwd_bloc.dart';


class SetPassWordPage extends StatelessWidget {
  const SetPassWordPage({super.key, this.phoneNum});
  final String? phoneNum;

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => SetPwdBloc(phoneNum),
      child: _SetPassWordPageView(),
    );
  }
}

class _SetPassWordPageView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<SetPwdBloc, SetPwdState>(
      listener: (context, s){
        if (s is PasswordSetSuccessState) {
          Navigator.of(context).pushNamedAndRemoveUntil(AppRouteName.home, (route) => false);
        }
      },
      child: _buildSetPwdView(),
    );
  }

  Widget _buildSetPwdView() => BlocBuilder<SetPwdBloc, SetPwdState>(
      builder: (context, state) {
        final bloc = BlocProvider.of<SetPwdBloc>(context);
        return Scaffold(
          body: Container(
            color: Colors.white,
            child: SafeArea(
              child: ListView(
                children: [
                  Padding(
                    padding: EdgeInsets.symmetric(horizontal: 40.w),
                    child: Column(
                      children: [
                        34.verticalSpace,
                        Row(
                          children: [
                            Image.asset(
                              'wow_logo'.assetPng,
                              height: 49.w,
                              width: 83.5.h,
                            ),
                            12.5.horizontalSpace,
                            Text(
                              '欢迎登录wow english\n接下来请设置一下您的密码吧！',
                              style: TextStyle(
                                  fontSize: 16.5.sp,
                                  color: const Color(0xFF666666)
                              ),
                            )
                          ],
                        ),
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Expanded(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: [
                                  43.verticalSpace,
                                  Row(
                                    children: [
                                      Expanded(
                                          child: TextFieldCustomerWidget(
                                            height: 55.h,
                                            hitText: '请输入八位以上密码',
                                            bgImageName: 'Input_layer_up',
                                            controller: bloc.passWordFirstController,
                                            obscureText: true,
                                            textInputType: TextInputType.emailAddress,
                                            onChangeValue: (String value) => bloc.add(PwdEnsureEvent()),
                                          )
                                      ),
                                      10.horizontalSpace,
                                      Opacity(
                                        opacity: bloc.showPwdIcon?1:0,
                                        child: Image.asset(
                                          bloc.passwordEnsure?'login_pass'.assetPng:'login_error'.assetPng,
                                          height: 30,
                                          width: 30,
                                        ),
                                      )
                                    ],
                                  ),
                                  9.verticalSpace,
                                  Offstage(
                                    offstage: !bloc.passwordLarger,
                                    child: const Text('您已达到密码最大输入数，请妥善调整密码'),
                                  ),
                                  9.verticalSpace,
                                  Row(
                                    children: [
                                      Expanded(
                                          child: TextFieldCustomerWidget(
                                            height: 55.h,
                                            hitText: '请再次输入相同密码',
                                            bgImageName: 'Input_layer_up',
                                            obscureText: true,
                                            textInputType: TextInputType.emailAddress,
                                            controller: bloc.passWordSecondController,
                                            onChangeValue: (String value) => bloc.add(PwdCheckEvent()),
                                          )
                                      ),
                                      10.horizontalSpace,
                                      Opacity(
                                        opacity: bloc.showCheckPwdIcon?1:0,
                                        child: Image.asset(
                                          bloc.passwordCheck?'login_pass'.assetPng:'login_error'.assetPng,
                                          height: 30,
                                          width: 30,
                                        ),
                                      )
                                    ],
                                  ),
                                  9.verticalSpace,
                                  Offstage(
                                    offstage: bloc.passwordCheck,
                                    child: Text(
                                      '请确认两次输入的密码是否一致',
                                      style: TextStyle(
                                          fontSize: 16.sp,
                                          color: const Color(0xFF333333)
                                      ),
                                    ),
                                  ),
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    children: [
                                      GestureDetector(
                                        onTap: () {
                                          if (!bloc.ensure) {
                                            return;
                                          }
                                          bloc.add(SetPasswordEvent());
                                        },
                                        child: Container(
                                          decoration: BoxDecoration(
                                            image: DecorationImage(
                                                image: AssetImage(
                                                    bloc.ensure?'login_enter'.assetPng:'login_enter_dis'.assetPng
                                                ),
                                                fit: BoxFit.fill
                                            ),
                                          ),
                                          padding: EdgeInsets.symmetric(
                                              horizontal: 28.w,
                                              vertical: 14.h
                                          ),
                                          child: Text(
                                            '确定',
                                            style: TextStyle(
                                                color: Colors.white,
                                                fontSize: 16.sp
                                            ),
                                          ),
                                        ),
                                      ),
                                      50.horizontalSpace
                                    ],
                                  )
                                ],
                              ),
                            ),
                            30.horizontalSpace,
                            Image.asset(
                              'steven'.assetPng,
                              height: 254.h,
                              width: 100.w,
                            )
                          ],
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
        );
      }
  );
}