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/models/APiResponse.dart';
import 'package:job_app/models/meeting.dart';
import 'package:job_app/services/meeting.dart';
import 'package:job_app/widgets/notification_card.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:syncfusion_flutter_datepicker/datepicker.dart';

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

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

class _NotificationsState extends State<Notifications> {
  MeetingService _meetingService = MeetingService();
  List<MeetingModel> meetings= [];
  List<DateTime> meetingDates=[];
  RefreshController _refreshController = RefreshController(initialRefresh: false);
  Future<void> getMeetings()async{
    ApiResponseModel response = await _meetingService.getMeetings();
    setState(() {
      meetings=response.data;
    });
    if(meetings!=null){
      meetings.forEach((element) {
        DateTime dateTime = DateTime.fromMicrosecondsSinceEpoch(element.date*1000);
        meetingDates.add(dateTime);
      });
    }

  }

  void _onRefresh() async{
    // monitor network fetch
    setState(() {
      meetings.clear();
      meetingDates.clear();
    });
    await Future.delayed(Duration(milliseconds: 1000));
    // if failed,use refreshFailed()

    getMeetings();

    _refreshController.refreshCompleted();
  }
  void _onLoading() async{
    Future.delayed(const Duration(milliseconds: 500), () {

// Here you can write your code

      setState(() {
        // Here you can write your code for open new view
      });
  print("refreshed");
    });
    _refreshController.loadComplete();
  }
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getMeetings();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffF8FAFC), //Color(0xff00152C),
      body: notifications(),
    );
  }
  notifications()  {
    return Padding(
      padding: const EdgeInsets.only(top: 50.0),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              SvgPicture.asset(
                "assets/icons/arrow_left.svg",
                color: Colors.black,
              ),
              Text(
                "Notifications",
                style: TextStyle(
                    fontFamily: 'MontserratSemiBold',
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: Colors.black),
              ),
              PopupMenuButton(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                  color: Colors.white,
                  child: Center(
                    child: SvgPicture.asset(
                      "assets/icons/calendar.svg",
                      height: 28,
                    ),
                  ),
                  offset: Offset(0, 40),

                  itemBuilder: (context) => <PopupMenuEntry>[
                    PopupMenuItem(
                      enabled: false,
                      child: Container(
                        color: Colors.white,
                        child: Column(
                          children: [
                            Padding(
                              padding: const EdgeInsets.fromLTRB(10, 20, 0, 10),
                              child: Row(
                                children: [
                                  Text("Calendar",style: TextStyle(color: Color(0xff333333),fontFamily: 'Montserrat',fontSize: 24),),
                                ],
                              ),
                            ),
                            Divider(thickness: 2,),
                            calendar(),
                          ],
                        ),
                      ),
                    )
                  ]),
            ],
          ),
          SizedBox(
            height: 40,
          ),
          Text(
            'Today',
            style: TextStyle(
                fontFamily: 'MontserratExtraLight',
                fontWeight: FontWeight.bold),
          ),
          Divider(
            thickness: 1.5,
            indent: 50,
            endIndent: 50,
          ),
          if(meetings!= null)
          Expanded(
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 25),
              child: SmartRefresher(
                controller: _refreshController,
                enablePullDown: true,
                header: ClassicHeader(
                  completeText: "",
                  idleText: "",
                  refreshingText: "",
                  releaseText: "",
                  failedText: "",
                  refreshStyle: RefreshStyle.Follow,
                  refreshingIcon: Image(image: AssetImage("assets/loading.gif"),height: 20,width: 20,),
                  iconPos: null,
                  idleIcon: null,
                  canTwoLevelIcon: null,
                  completeIcon: null,
                  failedIcon: null,
                  releaseIcon: null,
                ),
                onRefresh: _onRefresh,
                onLoading: _onLoading,
                footer: CustomFooter(
                  builder: (BuildContext context,LoadStatus mode){
                    Widget body ;
                    if(mode==LoadStatus.loading){
                      body =  CupertinoActivityIndicator.partiallyRevealed();
                    }
                    return Container(
                      height: 50.0,
                      child: Center(child:body),
                    );
                  },
                ),
                child: ListView.builder(
                  physics: BouncingScrollPhysics(),
                  itemCount: meetings.length,
                  itemBuilder: (context, i) => NotificationCard(meetings[i]),
                ),
              ),
            ),
          ),
          Flexible(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Container(
                  height: 150,
                  width: double.maxFinite,
                  child: Image(
                    fit: BoxFit.cover,
                    image: AssetImage('assets/images/notification_ad.png'),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );

  }
  calendar() {
    return Container(
      padding: EdgeInsets.all(8),
      height: 290,
      width: double.maxFinite,
      child: Center(
          child:SfDateRangePicker(
            minDate: DateTime.now(),
            selectableDayPredicate: (DateTime date){
              return false;
            },
            showNavigationArrow: true,

            navigationMode: DateRangePickerNavigationMode.snap,
            monthFormat: 'MMM',
            view: DateRangePickerView.month,
            selectionMode:
            DateRangePickerSelectionMode.single,
            monthViewSettings:
            DateRangePickerMonthViewSettings(
              enableSwipeSelection: true,
              showTrailingAndLeadingDates: true,
              weekendDays: [7, 6],
              numberOfWeeksInView: 6,
              viewHeaderHeight: 40,
              specialDates:meetingDates ,
              viewHeaderStyle: DateRangePickerViewHeaderStyle(
                textStyle: TextStyle(
                  color: Colors.black,
                  fontFamily: 'MontserratSemiBold',
                  fontSize: 14,),),
            ),
            selectionShape:
            DateRangePickerSelectionShape.circle,
            selectionColor: Palette.primary,
            selectionTextStyle: TextStyle(
              fontFamily: 'MontserratMedium',
            ),
            selectionRadius: 14,
            monthCellStyle: DateRangePickerMonthCellStyle(
                specialDatesDecoration: BoxDecoration(
                  color: Palette.primary,
                  border: Border.all(color: Palette.primary),
                  shape: BoxShape.circle,
                ),
                specialDatesTextStyle: TextStyle(
                  fontFamily: 'MontserratRegular',
                  color: Colors.white,
                  fontSize: 14,
                ),
                disabledDatesTextStyle: TextStyle(
                  color: Colors.black,
                  fontFamily: 'MontserratRegular',
                  fontSize: 14,
                ),
                textStyle: TextStyle(
                    color: Colors.black,
                    fontSize: 14,
                    fontFamily: 'MontserratRegular'),
                leadingDatesTextStyle: TextStyle(
                    fontFamily: 'MontserratRegular',
                    fontSize: 14,
                    color: Colors.black.withOpacity(0.5)),
                trailingDatesTextStyle: TextStyle(
                    fontFamily: 'MontserratRegular',
                    fontSize: 14,
                    color: Colors.black.withOpacity(0.5)),

                disabledDatesDecoration: BoxDecoration(
                    color: Colors.white
                ),
                todayCellDecoration:
                BoxDecoration(color: Colors.transparent),
                todayTextStyle: TextStyle(
                    fontSize: 14,
                    color: Palette.primary,
                    fontFamily: 'MontserratRegular')),
            headerStyle: DateRangePickerHeaderStyle(
                textStyle: TextStyle(
                    color: Palette.secendary,
                    fontFamily: 'Montserrat',
                    fontSize: 16,backgroundColor: Colors.white)),
            yearCellStyle: DateRangePickerYearCellStyle(
            ),
          )
      ),
    );
  }
}


Widget emptyNotifications() {
  return Padding(
    padding: const EdgeInsets.only(top: 50.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            SvgPicture.asset("assets/icons/arrow_left.svg"),
            Text(
              "Notifications",
              style: TextStyle(
                  fontFamily: 'MontserratSemiBold',
                  fontSize: 20,
                  color: Colors.white),
            ),
            SvgPicture.asset(
              "assets/icons/calander.svg",
            ),
          ],
        ),
        SizedBox(
          height: 160,
        ),
        SvgPicture.asset("assets/icons/beta.svg")
      ],
    ),
  );
}