import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:job_app/config/palette.dart';
import 'package:job_app/models/APiResponse.dart';
import 'package:job_app/services/cv/get_all_cv_models.dart';
import 'package:job_app/widgets/loading_screen.dart';
import 'package:textfield_tags/textfield_tags.dart';

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

  @override
  _BuildCvExperienceState createState() => _BuildCvExperienceState();
}

class _BuildCvExperienceState extends State<BuildCvExperience> {
  Map data={};
  List<String> languages = [];
  bool isLanguageErr=false;
  List<String> formations = [];
  bool isFormationErr=false;
  List<String> experiences = [];
  bool isExperienceErr=false;
  List<String> skills = [];
  bool isSkillsErr=false;
  bool isLoading=false;

  String introduction ;
  GlobalKey<FormState> _globalKey = GlobalKey<FormState>();



  @override
  Widget build(BuildContext context) {
    data=ModalRoute.of(context).settings.arguments;
    return Stack(
      children:[ GestureDetector(
        onTap: ()=>FocusScope.of(context).requestFocus(new FocusNode()),
        child: Scaffold(
          body: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.fromLTRB(20, 30, 20, 0),
              child: Column(children: [
                Padding(
                  padding: const EdgeInsets.fromLTRB(0,0,0,50),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        "Build your CV",
                        style: TextStyle(
                            color: Colors.black,
                            fontFamily: 'Montserrat',
                            fontSize: 22),
                      ),
                      IconButton(
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          icon: SvgPicture.asset("assets/icons/metro_cancle.svg"))
                    ],
                  ),
                ),
                Form(
                  key: _globalKey,
                    child: Column(
                  children: [
                    buildBigTextFormField(hintText: "Introduce yourself"),
                    buildTextFormField(hintText: 'Languages',isError: isLanguageErr),
                    buildTextFormField(hintText: 'Formations',isError: isFormationErr),
                    buildTextFormField(hintText: 'Experiences',isError: isExperienceErr),
                    buildTextFormField(hintText: 'Skills',isError:isSkillsErr),
                  ],
                )),

                Padding(
                  padding: const EdgeInsets.fromLTRB(0, 10, 0, 40),
                  child: Container(
                    width: double.infinity,
                    height: 45,
                    decoration: BoxDecoration(
                        color: Palette.primary,
                        borderRadius: BorderRadius.circular(8)),
                    child: TextButton(
                        onPressed: () async{

                          setState(()  {
                            if(languages.isEmpty){
                              isLanguageErr=true;
                            }if(formations.isEmpty){
                              isFormationErr=true;
                            }if(experiences.isEmpty){
                              isExperienceErr=true;
                            }if(skills.isEmpty){
                              isSkillsErr=true;
                            }
                          });
                            if(_globalKey.currentState.validate() && !isFormationErr && !isLanguageErr && !isExperienceErr && !isSkillsErr){
                              setState(() {
                                isLoading=true;
                              });
                              GetAllCvModels getCvModels =GetAllCvModels();
                              ApiResponseModel response= await getCvModels.getAllModels();
                              print("response.statusCode");
                              print(response.statusCode);
                              setState(() {
                                isLoading=false;
                              });
                              Map  laMap={
                                "intro":introduction,
                                  "language" :languages.toString(),
                                  "training": formations.toString(),
                                  "experience" : experiences.toString(),
                                 "skill": skills.toString()
                              };
                              Navigator.pushNamed(context, '/build_cv_model',arguments:laMap..addAll(data));
                            }


                          },
                        child: Text(
                          "Continue",
                          style: TextStyle(
                              fontSize: 22,
                              color: Colors.white,
                              fontFamily: 'MontserratRegular'),
                        )),
                  ),
                ),
              ],
              ),
            ),
          ),
        ),
      ),
        if(isLoading)
          LoadingScreen()
      ] );
  }
  Widget buildTextFormField({String hintText, bool isError}) {
    return Container(
      margin: EdgeInsets.only(bottom: 5),
      child: Container(
        height: 70,
        child: TextFieldTags(
          initialTags: [],
          textSeparators: [ hintText=="Languages"?" " : "  ", ",",".",""],
          tagsStyler: TagsStyler(
            showHashtag: false,
            tagMargin: const EdgeInsets.only(right: 4.0),
            tagCancelIcon: Icon(Icons.cancel, size: 15.0, color: Palette.primary),
            tagCancelIconPadding: EdgeInsets.only(left: 4.0, top: 2.0),
            tagPadding:
            EdgeInsets.only(top: 2.0, bottom: 4.0, left: 8.0, right: 2.0),
            tagDecoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(
                color: Colors.grey.shade300,
              ),
              borderRadius: const BorderRadius.all(
                Radius.circular(20.0),
              ),
            ),
            tagTextStyle:
            TextStyle(fontWeight: FontWeight.normal, color: Colors.black),
          ),
          textFieldStyler: TextFieldStyler(
            hintText: hintText,
            contentPadding: EdgeInsets.only(top: 10,left: 10),
            helperText: '${isError? 'Field is required':''}',
            helperStyle: TextStyle(
              color: Colors.red
            ),
            isDense: false,
            textFieldFocusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(5),
                borderSide: BorderSide(
                  color: isError?Colors.red:Color.fromRGBO(112, 112, 112, 0.8),
                )),
            textFieldEnabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(5),
              borderSide: BorderSide(color: isError?Colors.red:Color.fromRGBO(112, 112, 112, 0.8)),
            ),
          ),
          onDelete: (tag) {
            switch (hintText){
              case "Languages":
                languages.remove(tag);
                break;
              case "Formations":
                formations.remove(tag);
                break;
              case "Experiences":
                experiences.remove(tag);
                break;
              case "Skills":
                skills.remove(tag);
                break;
            }
            print(skills);
          },
          onTag: (tag) {
            switch (hintText){
              case "Languages":
                languages.add(tag);
                setState(() {
                  isLanguageErr=false;
                });
                break;
              case "Formations":
                formations.add(tag);
                setState(() {
                  isFormationErr=false;
                });
                break;
              case "Experiences":
                experiences.add(tag);
                setState(() {
                  isExperienceErr=false;
                });
                break;
              case "Skills":
                skills.add(tag);
                setState(() {
                  isSkillsErr=false;
                });
                break;
            }
          },
          validator: (String tag) {
            if (tag.length > 10 && hintText=="Languages") {
              return "Language should contain less than 10 characters";
            }else if(tag.length> 40 && hintText=="Formations"){
              return "Formations should contain less than 40 characters";
            }
            else if(tag.length> 40 && hintText=="Experiences"){
              return "Experiences should contain less than 40 characters";
            }
            else if(tag.length> 15 && hintText=="Skills"){
              return "Skills should contain less than 15 characters";
            }
            else if (tag.isEmpty) {
              return "You must at least enter one value";
            }
            return null;
          },
        ),
      ),
    );
  }
  Widget buildBigTextFormField({String hintText}) {
    return Container(
      margin: EdgeInsets.only(bottom: 25),
      child: TextFormField(
        maxLines: 3,
        keyboardType: TextInputType.multiline,
        autocorrect: false,
        validator: (val){
          if(val.length<10 || val.isEmpty){
            return "Introduction must have at least 10 characters";
          }
          return null;
        },
        onChanged: (val){
          setState(() {
            introduction=val;
          });
        },
        cursorColor: Palette.primary,
        style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
            fontFamily: 'MontserratExtraLight'),
        decoration: InputDecoration(
          focusedErrorBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(5),
              borderSide: BorderSide(color: Colors.red)),
          errorBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.red),
              borderRadius: BorderRadius.circular(5)),
          contentPadding: EdgeInsets.fromLTRB(10, 10, 0, 10),
          hintText: hintText,
          hintStyle: TextStyle(
            color: Color.fromRGBO(0, 0, 0, 0.3),
            fontFamily: 'MontserratExtraLight',
          ),
          focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(5),
              borderSide: BorderSide(
                color: Color.fromRGBO(112, 112, 112, 0.8),
              )),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(5),
            borderSide: BorderSide(color: Color.fromRGBO(112, 112, 112, 0.8)),
          ),
        ),
      ),
    );
  }

}