import 'dart:convert';
import 'dart:io';

import 'package:bbyyy/beans/upload_image_bean_entity.dart';
import 'package:bbyyy/https/my_request.dart';
import 'package:bbyyy/my_tools/my_colors.dart';
import 'package:bbyyy/my_tools/my_tools.dart';
import 'package:bbyyy/paegs/login_page/login_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/svg.dart';
import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';

class RegisteredPage extends StatefulWidget {
  @override
  _RegisteredPageState createState() => _RegisteredPageState();
}

class _RegisteredPageState extends State<RegisteredPage> {
  TextEditingController _phoneNum = TextEditingController(text: '');
  TextEditingController _nickname = TextEditingController(text: '');
  TextEditingController _pw = TextEditingController(text: '');
  int focus = -1;

  File _image;
  final picker = ImagePicker();

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        MyTools().hideKeyboard(context);
        setState(() {
          focus = -1;
        });
      },
      child: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: [
              Column(
                children: [
                  Container(
                    height: MediaQuery.of(context).size.width * (506 / 750),
                    child: Stack(
                      children: [
                        Image.asset(
                          'images/bg_1.png',
                          width: MediaQuery.of(context).size.width,
                          height:
                              MediaQuery.of(context).size.width * (506 / 750),
                        ),
                        Positioned(
                          top: 67,
                          child: Column(
                            children: [
                              Stack(
                                children: [
                                  Image.asset(
                                    'images/yuan_bg.png',
                                    height: 147,
                                    width: 147,
                                  ),
                                  GestureDetector(
                                    child: _image == null
                                        ? SvgPicture.asset(
                                            'images/svg/头像上传.svg',
                                            height: 75,
                                            width: 75,
                                          )
                                        : ClipRRect(
                                            child: Image.file(
                                              _image,
                                              height: 75,
                                              width: 75,
                                            ),
                                            borderRadius: BorderRadius.all(
                                                Radius.circular(75 / 2)),
                                          ),
                                    onTap: () async {
                                      final pickedFile =
                                          await picker.getImage(
                                              source: ImageSource.gallery);
                                      print('pickedFile---${pickedFile.path}');
                                      if (pickedFile != null) {
                                        File cropperImg =
                                            await ImageCropper.cropImage(
                                                sourcePath: pickedFile.path,
                                                aspectRatioPresets: [
                                                  CropAspectRatioPreset
                                                      .square,
                                                ],
                                                androidUiSettings:
                                                    AndroidUiSettings(
                                                        toolbarTitle: '图片剪裁',
                                                        toolbarColor:
                                                            MyColors.cFF4233,
                                                        toolbarWidgetColor:
                                                            Colors.white,
                                                        initAspectRatio:
                                                            CropAspectRatioPreset
                                                                .square,
                                                        lockAspectRatio:
                                                            true),
                                                iosUiSettings: IOSUiSettings(
                                                  minimumAspectRatio: 1.0,
                                                ));
                                        if (cropperImg != null) {
                                          setState(() {
                                            print('cropperImg---${cropperImg.path}');
                                            _image = cropperImg;
                                            print('_image---${_image.path}');
                                          });
                                        }
                                      }
                                    },
                                    behavior: HitTestBehavior.translucent,
                                  )
                                ],
                                alignment: Alignment.center,
                              ),
                              Container(
                                child: Text(
                                  '头像上传',
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 14),
                                ),
                                margin: EdgeInsets.only(top: 6),
                              )
                            ],
                          ),
                        )
                      ],
                      alignment: Alignment.topCenter,
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(left: 47, right: 47, top: 26),
                    child: Column(
                      children: [
                        Container(
                          child: Text(
                            'Hello Welcome !',
                            style: TextStyle(
                                color: MyColors.cFF4233, fontSize: 24),
                          ),
                          margin: EdgeInsets.only(bottom: 25),
                        ),
                        Row(
                          children: [
                            Container(
                              child: SvgPicture.asset(
                                'images/svg/手机.svg',
                                height: 22,
                                width: 22,
                              ),
                              height: 22,
                              width: 22,
                            ),
                            Expanded(
                              child: TextField(
                                controller: _phoneNum,
                                inputFormatters: [
                                  onlyInputNumberAndWorkFormatter(),
                                  LengthLimitingTextInputFormatter(11)
                                ],
                                cursorColor: MyColors.cFF4233,
                                cursorWidth: 1.0,
                                onTap: () {
                                  setState(() {
                                    focus = 0;
                                  });
                                },
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  disabledBorder: InputBorder.none,
                                  enabledBorder: InputBorder.none,
                                  focusedBorder: InputBorder.none,
                                  isDense: true,
                                  hintText: '请输入手机号',
                                  hintStyle: TextStyle(
                                      color: MyColors.c999999,
                                      fontSize: 16),
                                  contentPadding: const EdgeInsets.fromLTRB(
                                      14, 4.5, 8, 4.5),
                                ),
                                maxLines: 1,
                                style: TextStyle(
                                    color: MyColors.c333333,
                                    fontSize: 16,
                                    height: 1.3,
                                    letterSpacing: 0.2),
                                keyboardType: TextInputType.number,
                                onChanged: (t) {},
                              ),
                            )
                          ],
                        ),
                        Container(
                          height: 1,
                          color: focus == 0
                              ? MyColors.cFF4233
                              : MyColors.cD7D7D7,
                          margin: EdgeInsets.only(top: 8, bottom: 39),
                        ),
                        Row(
                          children: [
                            Container(
                              child: SvgPicture.asset(
                                'images/svg/昵称.svg',
                                height: 22,
                                width: 22,
                              ),
                              height: 22,
                              width: 22,
                            ),
                            Expanded(
                              child: TextField(
                                controller: _nickname,
                                cursorColor: MyColors.cFF4233,
                                cursorWidth: 1.0,
                                onTap: () {
                                  setState(() {
                                    focus = 2;
                                  });
                                },
                                decoration: InputDecoration(
                                    border: InputBorder.none,
                                    disabledBorder: InputBorder.none,
                                    enabledBorder: InputBorder.none,
                                    focusedBorder: InputBorder.none,
                                    hintText: '请输入昵称',
                                    hintStyle: TextStyle(
                                        color: MyColors.c999999,
                                        fontSize: 16),
                                    isDense: true,
                                    contentPadding:
                                        const EdgeInsets.fromLTRB(
                                            14, 4.5, 8, 4.5)),
                                maxLines: 1,
                                style: TextStyle(
                                    color: MyColors.c333333,
                                    fontSize: 16,
                                    height: 1.3,
                                    letterSpacing: 0.2),
                                keyboardType: TextInputType.text,
                                onChanged: (t) {},
                              ),
                            ),
                          ],
                        ),
                        // Row(
                        //   children: [
                        //     Container(
                        //       child: SvgPicture.asset(
                        //         'images/svg/验证码.svg',
                        //         height: 22,
                        //         width: 22,
                        //       ),
                        //       height: 22,
                        //       width: 22,
                        //     ),
                        //     Expanded(
                        //       child: TextField(
                        //         controller: _verificationCode,
                        //         cursorColor: MyColors.cFF4233,
                        //         cursorWidth: 1.0,
                        //         onTap: () {
                        //           setState(() {
                        //             focus = 1;
                        //           });
                        //         },
                        //         decoration: InputDecoration(
                        //             border: InputBorder.none,
                        //             disabledBorder: InputBorder.none,
                        //             enabledBorder: InputBorder.none,
                        //             focusedBorder: InputBorder.none,
                        //             hintText: '请输入验证码',
                        //             hintStyle: TextStyle(
                        //                 color: MyColors.c999999, fontSize: 16),
                        //             isDense: true,
                        //             contentPadding:
                        //             const EdgeInsets.fromLTRB(14, 4.5, 8, 4.5)),
                        //         maxLines: 1,
                        //         style: TextStyle(
                        //             color: MyColors.c333333,
                        //             fontSize: 16,
                        //             height: 1.3,
                        //             letterSpacing: 0.2),
                        //         keyboardType: TextInputType.text,
                        //         onChanged: (t) {},
                        //       ),
                        //     ),
                        //     Container(
                        //       decoration: BoxDecoration(
                        //           color: MyColors.c19FF4233,
                        //           borderRadius:
                        //           BorderRadius.all(Radius.circular(4))),
                        //       height: 34,
                        //       width: 90,
                        //     )
                        //   ],
                        // ),
                        Container(
                          height: 1,
                          color: focus == 2
                              ? MyColors.cFF4233
                              : MyColors.cD7D7D7,
                          margin: EdgeInsets.only(top: 8, bottom: 39),
                        ),
                        Row(
                          children: [
                            Container(
                              child: SvgPicture.asset(
                                'images/svg/密码.svg',
                                height: 22,
                                width: 22,
                              ),
                              height: 22,
                              width: 22,
                            ),
                            Expanded(
                              child: TextField(
                                controller: _pw,
                                inputFormatters: [
                                  onlyInputNumberAndWorkFormatter(),
                                  LengthLimitingTextInputFormatter(8)
                                ],
                                cursorColor: MyColors.cFF4233,
                                cursorWidth: 1.0,
                                onTap: () {
                                  setState(() {
                                    focus = 1;
                                  });
                                },
                                decoration: InputDecoration(
                                    border: InputBorder.none,
                                    disabledBorder: InputBorder.none,
                                    enabledBorder: InputBorder.none,
                                    focusedBorder: InputBorder.none,
                                    hintText: '请输入密码(6到8位)',
                                    hintStyle: TextStyle(
                                        color: MyColors.c999999,
                                        fontSize: 16),
                                    isDense: true,
                                    contentPadding:
                                        const EdgeInsets.fromLTRB(
                                            14, 4.5, 8, 4.5)),
                                maxLines: 1,
                                style: TextStyle(
                                    color: MyColors.c333333,
                                    fontSize: 16,
                                    height: 1.3,
                                    letterSpacing: 0.2),
                                keyboardType: TextInputType.visiblePassword,
                                obscureText: true,
                                onChanged: (t) {},
                              ),
                            )
                          ],
                        ),
                        Container(
                          height: 1,
                          color: focus == 1
                              ? MyColors.cFF4233
                              : MyColors.cD7D7D7,
                          margin: EdgeInsets.only(top: 8, bottom: 39),
                        ),
                        GestureDetector(
                          onTap: () {
                            if (_phoneNum.text.isEmpty ||
                                _phoneNum.text.length != 11) {
                              showToast('请填写正确的手机号');
                              return;
                            }
                            if (_pw.text.isEmpty || _pw.text.length < 6) {
                              showToast('请填写正确的密码（由数字和字母组合的至少6位的组合）');
                              return;
                            }
                            if (_nickname.text.isEmpty) {
                              showToast('请填写昵称');
                              return;
                            }
                            if (_image == null) {
                              showToast('请设置头像');
                              return;
                            }
                            uploadAvatar();
                          },
                          behavior: HitTestBehavior.translucent,
                          child: Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(
                                Radius.circular(20),
                              ),
                              gradient: LinearGradient(
                                colors: MyColors.lg,
                              ),
                            ),
                            height: 44,
                            child: Text(
                              '注 册',
                              style: TextStyle(
                                  color: Colors.white, fontSize: 17),
                            ),
                            alignment: Alignment.center,
                            padding: EdgeInsets.only(bottom: 2),
                          ),
                        ),
                        Container(
                          alignment: Alignment.centerRight,
                          child: GestureDetector(
                            onTap: () {
                              MyTools().toPage(
                                  context, LoginPage(), (then) {},
                                  noBack: true);
                            },
                            behavior: HitTestBehavior.translucent,
                            child: Container(
                              child: Text(
                                '已有账号，去登录',
                                style: TextStyle(
                                    color: MyColors.cFF4233, fontSize: 13),
                              ),
                              padding: EdgeInsets.all(8),
                              margin: EdgeInsets.only(top: 22),
                            ),
                          ),
                        ),
                        // Expanded(
                        //   child: SafeArea(
                        //     bottom: true,
                        //     child: Container(
                        //       padding: EdgeInsets.only(bottom: 50),
                        //       alignment: Alignment.bottomCenter,
                        //       child: Row(
                        //         children: [
                        //           GestureDetector(
                        //             onTap: () {
                        //               MyTools().toPage(
                        //                   context, LoginPage(), (then) {},
                        //                   noBack: true);
                        //             },
                        //             behavior: HitTestBehavior.translucent,
                        //             child: Container(
                        //               padding: EdgeInsets.all(8),
                        //               child: Text(
                        //                 '登录账号',
                        //                 style: TextStyle(
                        //                     color: MyColors.c666666, fontSize: 14),
                        //               ),
                        //             ),
                        //           ),
                        //           Container(
                        //             height: 13,
                        //             width: 2,
                        //             decoration: BoxDecoration(
                        //               borderRadius:
                        //                   BorderRadius.all(Radius.circular(1)),
                        //               color: MyColors.cFF4233,
                        //             ),
                        //             margin: EdgeInsets.only(left: 27, right: 27),
                        //           ),
                        //           GestureDetector(
                        //             onTap: () {
                        //               MyTools().toPage(
                        //                   context, ForgetPasswordPage(), (then) {},
                        //                   noBack: true);
                        //             },
                        //             behavior: HitTestBehavior.translucent,
                        //             child: Container(
                        //               padding: EdgeInsets.all(8),
                        //               child: Text(
                        //                 '忘记密码',
                        //                 style: TextStyle(
                        //                     color: MyColors.c666666, fontSize: 14),
                        //               ),
                        //             ),
                        //           ),
                        //         ],
                        //         mainAxisAlignment: MainAxisAlignment.center,
                        //       ),
                        //     ),
                        //   ),
                        // )
                      ],
                      crossAxisAlignment: CrossAxisAlignment.start,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  void uploadAvatar() {
    upload(_image, (r, hasError) {
      if (!hasError) {
        UploadImageBeanEntity data =
        UploadImageBeanEntity().fromJson(json.decode(r.data.toString()));
        registered(data);
      }
    }, (error) {});
  }

  void registered(UploadImageBeanEntity data) {
    registeredAccountNumber({
      'mobile':_phoneNum.text,
      'name':_nickname.text,
      'password':MyTools.base64Encode(_pw.text),
      'picture':data.data[0].path,
    }, (re, hasError) {
      if(!hasError){
        showToast('注册成功');
        MyTools().toPage(
            context, LoginPage(), (then) {},
            noBack: true);
      }
    }, (error) {});
  }
}