import 'dart:async';

import 'package:aiplot/tools/me/feedback_model.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';

import '../../generated/l10n.dart';

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

  @override
  State<FeedbackPage> createState() => _FeedbackPageState();
}

class _FeedbackPageState extends State<FeedbackPage> {
  StreamSubscription? subscription;
  final BeedbackModel _viewModel = BeedbackModel();

  //反馈内容
  String feedbackText = "";

  void _textFieldChanged(String str) {
    feedbackText = str;
    setState(() {});
  }

  //联系内容
  String contactText = "";

  void _textContactChanged(String str) {
    contactText = str;
    setState(() {});
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    //网络请求回调
    subscription = _viewModel.streamController.stream.listen((newData) {
      String code = newData['code'];
      if (code.isNotEmpty) {
        EasyLoading.dismiss();
        if (code == "submitUserFeedback") {
          EasyLoading.showToast(newData['data']);
          Navigator.pop(context);
        }
      }
      setState(() {});
    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    subscription?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final w301 = size.width / 1.1960132890365;
    final h45 = size.width / 8;
    final t188 = size.width / 1.9148936170212;

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 1,
        title: Container(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                margin: const EdgeInsets.only(right: 10),
                child: const Image(
                  width: 23,
                  height: 23,
                  image: AssetImage('assets/images/ic_title.png'),
                ),
              ),
              Text(
                S.of(context).Feedback,
                style: const TextStyle(color: Colors.black, fontSize: 20),
              ),
            ],
          ),
        ),
        leading: IconButton(
            icon: const ImageIcon(AssetImage('assets/images/ic_return.png')),
            color: Colors.black,
            onPressed: () {
              Navigator.pop(context);
            }),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        child: Stack(
          children: [
            Column(
              children: [
                Container(
                  alignment: Alignment.centerLeft,
                  margin: const EdgeInsets.only(left: 15, top: 17),
                  child: Text(
                    S.of(context).problems_encountered,
                    style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
                  ),
                ),

                ///反馈内容
                Container(
                  alignment: Alignment.center,
                  margin: const EdgeInsets.only(top: 13, left: 15, right: 15),
                  padding: const EdgeInsets.only(left: 9, top: 13, right: 9),
                  decoration: const BoxDecoration(
                    //背景
                    color: Color(0xFFF3F3FB),
                    //设置四周圆角 角度
                    borderRadius: BorderRadius.all(Radius.circular(6.6)),
                    //设置四周边框
                  ),
                  child: TextField(
                    keyboardType: TextInputType.name,
                    decoration: InputDecoration.collapsed(
                        hintText: S.of(context).Please_describe, hintStyle: const TextStyle(fontSize: 16.0, color: Color(0xFFB5B5B5))),
                    textAlign: TextAlign.left,
                    //文本对齐方式
                    //最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串
                    maxLines: 7,
                    //最大行数
                    style: const TextStyle(fontSize: 16.0, color: Colors.black),
                    //输入文本的样式
                    onChanged: _textFieldChanged,
                    autofocus: false,
                    maxLength: 500,
                  ),
                ),
                Container(
                  alignment: Alignment.centerLeft,
                  margin: const EdgeInsets.only(left: 15, top: 17),
                  child: Text(
                    S.of(context).Contact_information,
                    style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
                  ),
                ),

                ///联系方式
                Container(
                  alignment: Alignment.center,
                  margin: const EdgeInsets.only(top: 13, left: 15, right: 15),
                  padding: const EdgeInsets.only(left: 9, top: 13, right: 9, bottom: 9),
                  decoration: const BoxDecoration(
                    //背景
                    color: Color(0xFFF3F3FB),
                    //设置四周圆角 角度
                    borderRadius: BorderRadius.all(Radius.circular(6.6)),
                    //设置四周边框
                  ),
                  child: TextField(
                    keyboardType: TextInputType.name,
                    decoration: InputDecoration.collapsed(
                        hintText: S.of(context).Please_enter, hintStyle: const TextStyle(fontSize: 16.0, color: Color(0xFFB5B5B5))),
                    textAlign: TextAlign.left,
                    //文本对齐方式
                    //最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串
                    maxLines: 1,
                    //最大行数
                    style: const TextStyle(fontSize: 16.0, color: Colors.black),
                    //输入文本的样式
                    onChanged: _textContactChanged,
                    autofocus: false,
                  ),
                ),

                ///提交
                GestureDetector(
                  onTap: () {
                    if (feedbackText != "" && contactText != "") {
                      _viewModel.submitUserFeedback(feedbackText, contactText);
                    }
                  },
                  child: Container(
                    width: w301,
                    height: h45,
                    alignment: Alignment.center,
                    margin: EdgeInsets.only(top: t188),
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                            begin: Alignment.centerLeft, //渐变开始于上面的中间开始
                            end: Alignment.centerRight, //渐变结束于下面的中间
                            colors: [
                              feedbackText != "" && contactText != "" ? Color(0xFF843FFF) : Color(0xFFB4B4B4),
                              feedbackText != "" && contactText != "" ? Color(0xFFF87DFF) : Color(0xFFB4B4B4)
                            ]),
                        borderRadius: BorderRadius.all(Radius.circular(25))),
                    child: Text(
                      S.of(context).Submit,
                      style: const TextStyle(color: Colors.white, fontSize: 16),
                    ),
                  ),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}