import 'package:delayed_display/delayed_display.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:job_app/config/palette.dart';
import 'package:job_app/singletons/user_info.dart';
import 'package:job_app/singletons/wishlist.dart';
import 'package:job_app/views/messages.dart';
import 'package:job_app/views/user/update_profile.dart';
import 'package:job_app/views/wishlist.dart';
import 'package:job_app/widgets/filtering%20widgets/mainbottomsheetmodal.dart';
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:flutter_switch/flutter_switch.dart';


class TopContainer extends StatefulWidget {
  @override
  _TopContainerState createState() => _TopContainerState();
}

class _TopContainerState extends State<TopContainer> {
  bool pressed=false;
  bool isSettings=false;
  bool showSettings=false;
  double screenHeight=290;
  bool switchNotification=false;
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Color(0xffF0F5F9),
      ),
      child: Container(
        padding: EdgeInsets.fromLTRB(20, 50, 20, 10),
        width: double.maxFinite,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "Let's find your Job",
                  style: TextStyle(
                    fontFamily: 'MontserratSemiBold',
                    fontSize: 22,
                  ),
                ),
                if(userInfo.user!=null && userInfo.isValidToken)
                GestureDetector(
                  onTap: (){
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => Messages()),
                    );
                  },
                  child: Stack(
                    children: <Widget>[
                      Container(
                          width: 30,
                          height: 30,
                          child: new SvgPicture.asset('assets/icons/messages.svg',height: 10,width: 10,fit: BoxFit.fill,)),
                    ],
                  ),
                ),
                if(userInfo.user!=null && userInfo.isValidToken)
                PopupMenuButton(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20),
                    ),
                    color: Color(0xff0A2D4A),
                    child: Center(
                      child: CircleAvatar(
                        radius: 16,
                        foregroundImage:
                            NetworkImage("https://server.thejob.net/" + userInfo.user.image.url),
                        backgroundColor: Colors.transparent,
                      ),
                    ),
                    offset: Offset(-15, 45),
                    onCanceled: (){
                      setState(() {
                        isSettings=false;
                        screenHeight=290;
                      });
                    },
                    itemBuilder: (context) => <PopupMenuEntry>[
                          PopupMenuItem(
                              enabled: false,
                              child: StatefulBuilder(
                                builder: (context,setter){
                                  return AnimatedContainer(
                                    onEnd: ()async{
                                        if(isSettings){
                                              setter((){
                                            showSettings=true;
                                          });
                                        }else{
                                          setter((){
                                            showSettings=false;
                                          });
                                        }
                                    },
                                    curve: Curves.easeOut,
                                    duration: Duration(milliseconds: 150),
                                    width: 556,
                                    height: screenHeight,
                                    child: Padding(
                                      padding: const EdgeInsets.fromLTRB(10, 20, 10, 0),
                                      child: Column(
                                        children: [
                                          Row(
                                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                            children: [
                                              Column(
                                                crossAxisAlignment: CrossAxisAlignment.start,
                                                children: [
                                                  Text("${userInfo.user.name}",style: TextStyle(
                                                      color: Colors.white,
                                                      fontFamily: 'MontserratRegular',
                                                      fontSize: 16,
                                                      fontWeight: FontWeight.w500
                                                  ),),
                                                  Text("${userInfo.user.email}",style: TextStyle(
                                                      color: Colors.white.withOpacity(0.5),
                                                      fontFamily: 'MontserratRegular',
                                                      fontSize: 14,
                                                      fontWeight: FontWeight.w500
                                                  ),),
                                                ],
                                              ),
                                              // CircleAvatar(
                                              //   radius: 16,
                                              //   foregroundImage:
                                              //   NetworkImage("https://server.thejob.net/" + userInfo.user.image.url),
                                              //   backgroundColor: Colors.transparent,
                                              // ),
                                            ],
                                          ),
                                          SizedBox(
                                            height: 30,
                                          ),
                                          Container(
                                            color: Colors.white,
                                            width: double.maxFinite,
                                            height: 0.5,
                                          ),
                                          SizedBox(
                                            height: 30,
                                          ),
                                          GestureDetector(
                                            onTap: ()async{

                                              Navigator.push(
                                                context,
                                                MaterialPageRoute(builder: (context) => Wishlist()),
                                              );
                                            },
                                            child: ChangeNotifierProvider.value(
                                              value: WishlistSingleTons(),
                                              child: Consumer<WishlistSingleTons>(
                                                builder: (context,data,child) {
                                                  return Row(
                                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                    children: [
                                                      Row(
                                                        children: [SvgPicture.asset("assets/icons/heart.svg"),
                                                          SizedBox(width: 10,),
                                                          Text('Wishlist',style: TextStyle(color: Colors.white,
                                                              fontFamily: 'MontserratRegular',
                                                              fontSize: 16,
                                                              fontWeight: FontWeight.w500),),],
                                                      ),
                                                      Text("${data.wishlist.count}",style: TextStyle(
                                                          color: Color.fromRGBO(255, 255, 255, 0.6),
                                                          fontFamily: 'MontserratRegular',
                                                          fontSize: 16,
                                                          fontWeight: FontWeight.w500
                                                      ),),
                                                    ],
                                                  );
                                                }
                                              ),
                                            ),
                                          ),
                                          SizedBox(height: 20,),
                                          Row(
                                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                            children: [
                                              Row(
                                                children: [
                                                  SvgPicture.asset("assets/icons/global.svg"),
                                                  SizedBox(width: 10,),
                                                  Text('Language',style: TextStyle(color: Colors.white,
                                                      fontFamily: 'MontserratRegular',
                                                      fontSize: 16,
                                                      fontWeight: FontWeight.w500),),
                                                ],
                                              ),
                                              if(pressed)
                                                Text("pressed"),
                                              GestureDetector(
                                                onTap: (){
                                                  setter((){
                                                    pressed=!pressed;
                                                  });
                                                },
                                                child: Row(
                                                  children: [
                                                    Text("English",style: TextStyle(color: Colors.white,
                                                        fontFamily: 'MontserratRegular',
                                                        fontSize: 10,
                                                        fontWeight: FontWeight.w500),),
                                                    Icon(Icons.keyboard_arrow_right_rounded,color: Colors.white,)
                                                  ],
                                                ),
                                              )
                                            ],
                                          ),

                                          SizedBox(height: 20,),
                                          GestureDetector(
                                            onTap: (){
                                              setter((){
                                                isSettings=!isSettings;
                                                if(isSettings){
                                                  screenHeight=490;
                                                }else{
                                                  screenHeight=290;
                                                }
                                              });
                                            },
                                            child: Row(
                                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                              children: [
                                                Row(
                                                  children: [
                                                    SvgPicture.asset("assets/icons/settings.svg"),
                                                    SizedBox(width: 10,),
                                                    Text('Settings',style: TextStyle(color: Colors.white,
                                                        fontFamily: 'MontserratRegular',
                                                        fontSize: 16,
                                                        fontWeight: FontWeight.w500),),
                                                  ],
                                                ),
                                                Container(
                                                    child: !isSettings?Icon(Icons.keyboard_arrow_right_rounded,color: Colors.white,):Icon(Icons.keyboard_arrow_down_rounded,color: Colors.white,)),
                                              ],
                                            ),
                                          ),
                                          if(isSettings && showSettings)
                                          DelayedDisplay(
                                            slidingBeginOffset: Offset(0,0),
                                            fadingDuration: Duration(milliseconds: 450),

                                            child: Column(
                                              children: [
                                                  SizedBox(height: 20,),
                                                  Row(
                                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                    children: [
                                                      Padding(
                                                        padding: const EdgeInsets.only(left: 8.0),
                                                        child: Text("Notification",style: TextStyle(
                                                            color: Colors.white,
                                                            fontFamily: 'MontserratRegular',
                                                            fontSize: 14,
                                                            fontWeight: FontWeight.w500
                                                        ),),
                                                      ),
                                                      Padding(
                                                        padding: const EdgeInsets.only(right: 12.0),
                                                        child: FlutterSwitch(
                                                            width: 30.0,
                                                            height: 15.0,
                                                            toggleSize: 15.0,
                                                            borderRadius: 20.0,
                                                            padding: 0.0,
                                                            activeColor: Palette.primary,
                                                            showOnOff: false,
                                                            value: switchNotification, onToggle: (val){
                                                          setter((){
                                                            switchNotification=val;
                                                          });
                                                        }),
                                                      ),
                                                    ],
                                                  ),
                                                  SizedBox(height: 10,),
                                                  TextButton(
                                                      onPressed:(){

                                                      },
                                                      child:Row(
                                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                        children: [
                                                          Text("Change password",style: TextStyle(
                                                              color: Colors.white,
                                                              fontFamily: 'MontserratRegular',
                                                              fontSize: 14,
                                                              fontWeight: FontWeight.w500
                                                          ),),
                                                          Icon(Icons.keyboard_arrow_right_rounded,color: Colors.white,),
                                                        ],
                                                      ),
                                                      style: ButtonStyle(
                                                          overlayColor: MaterialStateProperty.resolveWith((states) => Colors.transparent)
                                                      )
                                                  ),
                                                  TextButton(
                                                      onPressed:(){

                                                      },
                                                      child:GestureDetector(
                                                        onTap: (){
                                                          Navigator.pop(context);
                                                          Navigator.push(
                                                            context,
                                                            MaterialPageRoute(builder: (context) => UpdateProfile()),
                                                          );
                                                        },
                                                        child: Row(
                                                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                          children: [
                                                            Text("Edit Profile",style: TextStyle(
                                                                color: Colors.white,
                                                                fontFamily: 'MontserratRegular',
                                                                fontSize: 14,
                                                                fontWeight: FontWeight.w500
                                                            ),),
                                                            Icon(Icons.keyboard_arrow_right_rounded,color: Colors.white,),
                                                          ],
                                                        ),
                                                      ),
                                                      style: ButtonStyle(
                                                          overlayColor: MaterialStateProperty.resolveWith((states) => Colors.transparent)
                                                      )
                                                  ),
                                                  TextButton(
                                                      onPressed:(){

                                                      },
                                                      child:Row(
                                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                        children: [
                                                          Text("Edit CV",style: TextStyle(
                                                              color: Colors.white,
                                                              fontFamily: 'MontserratRegular',
                                                              fontSize: 14,
                                                              fontWeight: FontWeight.w500
                                                          ),),
                                                          Icon(Icons.keyboard_arrow_right_rounded,color: Colors.white,),
                                                        ],
                                                      ),
                                                      style: ButtonStyle(
                                                          overlayColor: MaterialStateProperty.resolveWith((states) => Colors.transparent)
                                                      )
                                                  ),
                                              ],
                                            ),
                                          ),
                                          SizedBox(height: 20,),
                                          GestureDetector(
                                            onTap: ()async{
                                              userInfo.user=null;
                                              userInfo.isValidToken=false;
                                              final prefs=await SharedPreferences.getInstance();
                                              prefs.setString('token', "token");
                                              Navigator.pop(context);
                                              Navigator.pushNamed(context, '/login_register');
                                            },
                                            child: Row(
                                              children: [
                                                SvgPicture.asset("assets/icons/logout.svg"),
                                                SizedBox(width: 10,),
                                                Text('Logout',style: TextStyle(color: Colors.white,
                                                    fontFamily: 'MontserratRegular',
                                                    fontSize: 16,
                                                    fontWeight: FontWeight.w500),),
                                              ],
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  );
                                },
                              ))
                        ]),
              ],
            ),
            SizedBox(
              height: 10,
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(0, 15, 0, 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Container(
                      child: Text(
                    'Search...',
                    style: TextStyle(
                        fontFamily: 'MontserratSemiBold', fontSize: 19),
                  )),
                ],
              ),
            ),
            SizedBox(
              height: 30,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  height: 37,
                  width: 260,
                  child: SearchText(),
                ),
                SizedBox(
                  width: 5,
                ),
                Container(
                  height: 55,
                  width: 55,
                  child: IconButton(
                      icon: SvgPicture.asset(
                        "assets/icons/filterIcon.svg",
                      ),
                      onPressed: () {
                        if (userInfo.isValidToken) {
                          showModalBottomSheet(
                              isScrollControlled: false,
                              shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.only(
                                      topLeft: Radius.circular(50),
                                      topRight: Radius.circular(50))),
                              backgroundColor: Palette.secendary,
                              context: context,
                              builder: (context) => BottomSheetBuilder());
                        } else {
                          Navigator.pushNamed(context, '/login_register');
                        }
                      }),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class SearchText extends StatelessWidget {
  const SearchText({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextField(
        onSubmitted: (val) {
          print(val);
        },
        autocorrect: false,
        style: TextStyle(
            fontSize: 17, height: 1, color: Color.fromRGBO(112, 112, 112, 0.5)),
        cursorColor: Color(0xff707070),
        textAlignVertical: TextAlignVertical.center,
        decoration: InputDecoration(
          hintStyle: TextStyle(color: Color.fromRGBO(112, 112, 112, 0.5)),
          prefixIcon: Icon(
            Icons.search,
            color: Color.fromRGBO(112, 112, 112, 0.5),
          ),
          hintText: "Keyword",
          fillColor: Palette.backgroundColor,
          filled: true,
          contentPadding: EdgeInsets.fromLTRB(0, 0, 0, 10),
          enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(3),
              borderSide:
                  BorderSide(color: Color.fromRGBO(112, 112, 112, 0.5))),
          focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(3),
              borderSide: BorderSide(color: Color(0xff707070))),
        ));
  }
}