import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:link/view/component/link_btn.dart';

import '../constants.dart';
import '../utils/api.dart';
import '../utils/http_utils.dart';
import '../utils/size_fit.dart';
import '../utils/storage.dart';
import 'component/link_step.dart';
import 'component/toast.dart';
import 'component/top_container.dart';

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

  @override
  State<EditBaseInfo> createState() => _EditBaseInfoState();
}

class _EditBaseInfoState extends State<EditBaseInfo> {
  bool isBoy = true;
  String intro = '';
  TextEditingController controller = TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    var userInfo = StorageUtil().getJSON('tempUser1');
    if (userInfo != null) {
      if (userInfo['gender'] != null) {
        isBoy = userInfo['gender']=='1';
      }
      if (userInfo['intro'] != null) {
        intro = userInfo['intro'];
        controller.text = intro;
      }
    } else {
      StorageUtil().setJSON('tempUser1', {});
    }

    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose

    controller.dispose();
    super.dispose();
  }

  updateCache() {
    StorageUtil()
        .setJSON('tempUser1', {"gender": isBoy ? '1' : '0', "intro": intro});
  }

  Future commit() async {
    Toast().showHud(context: context);
    var data2 = await HttpUtils.post(Api.userInfo, data: {
      'sex': isBoy ? 'MALE' : 'FEMALE',
      'signature': intro,
      'area': '北京',
      'city': '北京',
      'province': '北京',
      'country': '中国'
    });

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

  body() {
    TextStyle style = TextStyle(
        color: kThemeColor, fontSize: 16.px, fontWeight: FontWeight.bold);
    return Material(
        color: kBgColor,
        child: TopContainer(
            child: Stack(children: [
          Positioned(
              left: 0,
              top: 0,
              right: 0,
              bottom: 0,
              child: Padding(
                  padding: EdgeInsets.only(
                      bottom: MediaQuery.of(context).viewInsets.bottom),
                  child: SingleChildScrollView(
                    child: 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,
                                      kThemeColor,
                                      Color(0xFF74747A)
                                    ])),
                              ),
                              Container(
                                transform: Matrix4.translationValues(-2, 0, 0),
                                child: LinkStep(
                                    step: 2, content: '', hasShadow: false),
                              )
                            ]),
                        SizedBox(
                          height: 32.px,
                        ),
                        Container(
                          width: 343.px,
                          padding: EdgeInsets.only(
                              left: 20.px,
                              right: 20.px,
                              top: 18.px,
                              bottom: 18.px),
                          decoration: BoxDecoration(
                              color: const Color(0xFF2C2C2E),
                              borderRadius: BorderRadius.circular(24.px)),
                          child: Column(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Row(
                                  children: [
                                    Text(
                                      '性别',
                                      style: style,
                                    ),
                                    Expanded(child: Container()),
                                    GestureDetector(
                                      onTap: () {
                                        setState(() {
                                          isBoy = true;
                                        });
                                        updateCache();
                                      },
                                      child: Container(
                                        alignment: Alignment.center,
                                        width: 40.px,
                                        height: 40.px,
                                        decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(20.px),
                                            color: isBoy
                                                ? const Color(0xFF00FFFF)
                                                : const Color(0xFF444447)),
                                        child: SvgPicture.asset(
                                          'assets/icons/gender_male.svg',
                                          width: 24.px,
                                          height: 24.px,
                                        ),
                                      ),
                                    ),
                                    SizedBox(
                                      width: 16.px,
                                    ),
                                    GestureDetector(
                                      onTap: () {
                                        setState(() {
                                          isBoy = false;
                                        });
                                        updateCache();
                                      },
                                      child: Container(
                                        alignment: Alignment.center,
                                        width: 40.px,
                                        height: 40.px,
                                        decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(20.px),
                                            color: !isBoy
                                                ? const Color(0xFFFF00AA)
                                                : const Color(0xFF444447)),
                                        child: SvgPicture.asset(
                                          'assets/icons/gender_female.svg',
                                          width: 24.px,
                                          height: 24.px,
                                        ),
                                      ),
                                    )
                                  ],
                                ),
                                Container(
                                  margin: EdgeInsets.only(
                                      top: 18.px, bottom: 18.px),
                                  height: 1.px,
                                  color: const Color(0xFF404040),
                                ),
                                GestureDetector(
                                  child: Row(
                                    children: [
                                      Text('地区', style: style),
                                      Expanded(child: Container()),
                                      Text(
                                        '中国 北京',
                                        style: TextStyle(
                                            color: Colors.white,
                                            fontSize: 14.px),
                                      ),
                                      Image.asset(
                                        'assets/images/arrow_right.png',
                                        width: 20.px,
                                        height: 20.px,
                                      )
                                      // SvgPicture.asset(
                                      //   'assets/icons/arrow_right.svg',
                                      //   color: const Color(0xFF444447),
                                      //   width: 20.px,
                                      //   height: 20.px,
                                      // )
                                    ],
                                  ),
                                ),
                                Container(
                                  margin: EdgeInsets.only(
                                      top: 18.px, bottom: 18.px),
                                  height: 1.px,
                                  color: const Color(0xFF404040),
                                ),
                                Container(
                                  color: Colors.transparent,
                                  child: Text('简介', style: style),
                                ),
                                SizedBox(
                                  height: 8.px,
                                ),
                                Container(
                                  color: Colors.transparent,
                                  child: TextField(
                                      maxLength: 1000,
                                      maxLines: 1000,
                                      minLines: 1,
                                      cursorColor: kBtnColor,
                                      controller: controller,
                                      style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 14.px,
                                      ),
                                      onChanged: (e) {
                                        setState(() {
                                          intro = e;
                                        });
                                        updateCache();
                                      },
                                      decoration: InputDecoration(
                                        border: InputBorder.none,
                                        hintText: '请填写您的简介（选填）',
                                        hintStyle: TextStyle(
                                            fontSize: 14.px,
                                            color: const Color(0xFF74747A)),
                                        counterText: "",
                                      )),
                                )
                                // Text('个性签名', style: style),
                                // TextField(
                                //     maxLength: 1000,
                                //     maxLines: 1000,
                                //     minLines: 1,
                                //     cursorColor: kBtnColor,
                                //     style: TextStyle(
                                //       color: Colors.white,
                                //       fontSize: 14.px,
                                //     ),
                                //     onChanged: (e){
                                //       setState(() {
                                //         intro = e;
                                //       });
                                //     },
                                //     decoration: InputDecoration(
                                //       border: InputBorder.none,
                                //       hintText: '请填写您的个性签名（选填）',
                                //       hintStyle: TextStyle(
                                //           fontSize: 14.px,
                                //           color: const Color(0xFF74747A)),
                                //       counterText: "",
                                //     )),
                              ]),
                        ),
                        SizedBox(
                          height: 144.px,
                        )
                      ],
                    ),
                  ))),
          Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              child: Container(
                width: 375.px,
                height: 144.px,
                alignment: Alignment.bottomCenter,
                padding: EdgeInsets.only(bottom: 56.px),
                decoration: const BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                      Color(0x00131314),
                      Color(0xFF131314),
                      Color(0xFF131314),
                      Color(0xFF131314)
                    ])),
                child: LinkButton(
                    title: '下一步',
                    disable: false,
                    isBlack: false,
                    callback: () {
                      commit();
                    }),
              ))
        ])));
  }

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