import 'dart:html';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:link/utils/storage.dart';
import 'package:link/view/component/link_btn.dart';
import 'package:file_picker/file_picker.dart';
import 'package:link/view/component/link_step.dart';
import 'package:link/view/component/toast.dart';
import '../constants.dart';
import '../utils/api.dart';
import '../utils/http_utils.dart';
import '../utils/size_fit.dart';
import 'component/top_container.dart';
import 'package:dio/dio.dart' as adio;
import 'package:dio/dio.dart';

import 'component/upload_file.dart';
import 'edit_avatar.dart';

class EditAvatrNick extends StatefulWidget {
  const EditAvatrNick({Key? key}) : super(key: key);

  @override
  State<EditAvatrNick> createState() => _EditAvatrNickState();
}

class _EditAvatrNickState extends State<EditAvatrNick> {
  TextEditingController controller = TextEditingController();
  FocusNode focusNode = FocusNode();
  bool isFocus = false;
  String strContent = '';
  String avatar = '';
  Uint8List? chooseImage;

  @override
  void initState() {
    // TODO: implement initState
    // var userInfo = StorageUtil().getJSON('userInfo');
    var userInfo = StorageUtil().getJSON('tempUser0');
    if (userInfo != null) {
      if (userInfo['nickname'] != null) {
        strContent = userInfo['nickname'];
        controller.text = strContent;
      }
      if (userInfo['avatar'] != null) {
        avatar = userInfo['avatar'];
      }
    } else {
      StorageUtil().setJSON('tempUser0', {});
    }

    focusNode.addListener(() {
      setState(() {
        isFocus = focusNode.hasFocus;
      });
    });

    super.initState();
  }

  updateCache() {
    StorageUtil()
        .setJSON('tempUser0', {"avatar": avatar, "nickname": strContent});
  }

  Future uploadImage(Uint8List? imgData) async {
    // Toast().showHud(context: context);
    Map<String, dynamic> data = await HttpUtils.get(Api.ossFormUpload,
        params: {'type': 'AVATAR', 'file_ext': 'png'});
    Dio dio = Dio();
    Map<String, dynamic> map = data['fields'];

    map['file'] =
        await adio.MultipartFile.fromBytes(imgData!, filename: 'avatar.png');
    adio.FormData formData = adio.FormData.fromMap(map);
    adio.Response response = await dio.post(data['upload_url'], data: formData);

    var data2 =
        await HttpUtils.post(Api.userInfo, data: {'avatar': data['view_url']});

    if (data2 != null) {
      print(data['view_url']);
      // getUserInfo();
    }
    setState(() {
      avatar = data['view_url'];
    });

    updateCache();
    // Toast().hideHud();
  }

  Future commit() async {
    if (chooseImage == null && avatar.isEmpty) {
      Toast().showInfoText('请上传头像', context: context);
      return;
    }
    if (strContent.isEmpty) {
      Toast().showInfoText('请输入昵称', context: context);
      return;
    }
    Toast().showHud(context: context);
    var data2 =
        await HttpUtils.post(Api.userInfo, data: {'nickname': strContent});

    if (data2 != null) {
      print(data2.toString());
    }
    Toast().hideHud();
    Get.toNamed('/edit_base_info');
    StorageUtil().remove('tempUser0');
  }

  body() {
    return Material(
        color: kBgColor,
        child: TopContainer(
            child: Stack(children: [
          Column(
            children: [
              SizedBox(
                height: 32.px,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  LinkStep(step: 1, content: '完善基本信息', hasShadow: true),
                  Container(
                    width: 60.px,
                    height: 8.px,
                    transform: Matrix4.translationValues(-1, 0, 0),
                    decoration: const BoxDecoration(
                        gradient: LinearGradient(
                            begin: Alignment.centerLeft,
                            end: Alignment.centerRight,
                            colors: [kThemeColor, Color(0xFF74747A)])),
                  ),
                  Container(
                    transform: Matrix4.translationValues(-2, 0, 0),
                    child: LinkStep(step: 2, content: '', hasShadow: false),
                  )
                ],
              ),
              SizedBox(
                height: 64.px,
              ),

              UploadFile(
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(70.px),
                    child: Container(
                      width: 140.px,
                      height: 140.px,
                      alignment: Alignment.bottomCenter,
                      decoration: BoxDecoration(
                          image: chooseImage != null
                              ? DecorationImage(
                                  image: MemoryImage(chooseImage!),
                                  fit: BoxFit.cover)
                              : avatar.isNotEmpty
                                  ? DecorationImage(
                                      image: NetworkImage(avatar),
                                      fit: BoxFit.cover)
                                  : const DecorationImage(
                                      image: AssetImage(
                                          'assets/images/default_avatar.png'))),
                      child: Container(
                        height: 28.px,
                        color: kThemeColor,
                        alignment: Alignment.center,
                        child: SvgPicture.asset(
                          'assets/icons/edit.svg',
                          width: 24.px,
                          height: 24.px,
                          color: Colors.black,
                        ),
                      ),
                    )),
                callback: (Uint8List file) {
                  showDialog(
                      context: context,
                      barrierDismissible: false,
                      barrierColor: Colors.transparent,
                      useSafeArea: false,
                      builder: (BuildContext context) {
                        return EditAvatar(
                          image: file,
                          callback: (Uint8List img) {
                            setState(() {
                              chooseImage = img;
                            });
                            uploadImage(img);
                          },
                        );
                      });
                  // setState(() {
                  //   chooseImage = file;
                  // });
                  // uploadImage(file);
                },
              ),
              // GestureDetector(
              //   onTap: () {
              //     chooseFile();
              //   },
              //   child: ClipRRect(
              //       borderRadius: BorderRadius.circular(70.px),
              //       child: Container(
              //         width: 140.px,
              //         height: 140.px,
              //         alignment: Alignment.bottomCenter,
              //         decoration: BoxDecoration(
              //             image: chooseImage != null
              //                 ? DecorationImage(
              //                     image: MemoryImage(chooseImage!),
              //                     fit: BoxFit.cover)
              //                 : avatar.isNotEmpty
              //                     ? DecorationImage(
              //                         image: NetworkImage(avatar),
              //                         fit: BoxFit.cover)
              //                     : const DecorationImage(
              //                         image: AssetImage(
              //                             'assets/images/default_avatar.png'))),
              //         child: Container(
              //           height: 28.px,
              //           color: kThemeColor,
              //           alignment: Alignment.center,
              //           child: SvgPicture.asset(
              //             'assets/icons/edit.svg',
              //             width: 13.px,
              //             height: 13.px,
              //             color: Colors.black,
              //           ),
              //         ),
              //       )),
              // ),
              SizedBox(
                height: 24.px,
              ),
              Container(
                  width: 315.px,
                  height: 68.px,
                  alignment: Alignment.centerLeft,
                  padding: EdgeInsets.only(left: 16.px, right: 16.px),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(16.px),
                      color: const Color(0xFF2C2C2E)),
                  child: TextField(
                    // autofocus: true,
                    controller: controller,
                    focusNode: focusNode,
                    maxLength: 50,
                    cursorColor: kBtnColor,
                    onChanged: (value) {
                      setState(() {
                        strContent = value;
                      });
                      updateCache();
                    },
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.white, fontSize: 18.px),
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: isFocus ? '' : '请输入您的昵称',
                      hintStyle: TextStyle(
                          fontSize: 18.px, color: const Color(0xFF74747A)),
                      counterText: "",
                    ),
                  )),
              Expanded(child: Container()),
              LinkButton(
                  title: '下一步',
                  disable: false,
                  isBlack: false,
                  callback: () {
                    commit();
                    // Get.toNamed('/edit_base_info');
                  }),
              SizedBox(
                height: 56.px,
              )
            ],
          ),
        ])));
  }

  @override
  Widget build(BuildContext context) {
    SizeFit.initialize(context);
    return body();
    // return Padding(padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),child: body(),);
    // return Scaffold(resizeToAvoidBottomInset: true,body: body(),);
  }
}