import 'package:date_format/date_format.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/main/lockDetail/checkingIn/checkingInList/checkingInListMonth_entity.dart';

import '../../../../appRouters.dart';
import '../../../../app_settings/app_colors.dart';
import '../../../../tools/noData.dart';
import '../../../../tools/showBottomSheetTool.dart';
import '../../../../tools/showCalendar.dart';
import '../../../../tools/storage.dart';
import '../../../../tools/titleAppBar.dart';
import '../../../../translations/trans_lib.dart';
import 'checkingInListDay_entity.dart';
import 'checkingInList_logic.dart';

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

  @override
  State<CheckingInListPage> createState() => _CheckingInListPageState();
}

class _CheckingInListPageState extends State<CheckingInListPage> {
  final logic = Get.put(CheckingInListLogic());
  final state = Get.find<CheckingInListLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.mainBackgroundColor,
      appBar: TitleAppBar(
        haveTitleWidget: true,
        titleWidget: titleWidget(),
        haveBack: true,
        backgroundColor: AppColors.mainColor,
        actionsList: [
          (state.getKeyInfosData.value.keyRight == 1) ?
          GestureDetector(
              onTap: () async {
                var isDemoMode =  await Storage.getBool(ifIsDemoModeOrNot);
                if(isDemoMode == false){
                  Get.toNamed(Routers.checkingInSetPage, arguments: {
                    "getKeyInfosData": state.getKeyInfosData.value,
                  });
                }else{
                  // Get.toNamed(Routers.selectLockTypePage);
                  logic.showToast("演示模式");
                }
              },
              child: Image.asset('images/main/icon_lockDetail_checkIn_set.png', width: 36.w, height: 36.w,)) : Container(),
          SizedBox(width: 30.w),
        ],
      ),
      body: Column(
        children: [
          topInfo(),
          SizedBox(height: 10.h),
          middleDayInfo(),
          Expanded(child: getBottomList())
        ],
      ),
    );
  }

  Widget topInfo() {
    return Container(
      width: 1.sw,
      // height: 280.h,
      color: Colors.white,
      child: Column(
        children: [
          SizedBox(height: 30.h),
          Obx(() => Container(
              width: 110.w,
              height: 110.w,
              padding: EdgeInsets.all(10.w),
              decoration: BoxDecoration(
                color: AppColors.mainColor,
                borderRadius: BorderRadius.circular(60.w),
              ),
              child: Image.asset(getTopImg(), width: 120.w, height: 120.w)
          )),
          SizedBox(height: 10.h),
          Obx(() => Text(getTopTitle(), style: TextStyle(color: Colors.black, fontSize: 24.sp))),
          SizedBox(height: 30.h),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              // SizedBox(width: 30.w,),
              Row(
                children: [
                  SizedBox(width: 20.w,),
                  GestureDetector(
                    onTap: () async {
                      var isDemoMode =  await Storage.getBool(ifIsDemoModeOrNot);
                      if(isDemoMode == false){
                        setState(() {
                          state.isDay.value = true;
                          DateTime dateTime = DateTime.fromMillisecondsSinceEpoch(state.checkListDateTimestamp.value);
                          String beginDate = formatDate(dateTime, [mm,'-',dd]);
                          state.checkListDate.value = beginDate;
                          logic.loadDataByType();
                        });
                      }else{
                        // Get.toNamed(Routers.selectLockTypePage);
                        logic.showToast("演示模式");
                      }
                    },
                    child: Container(
                      width: 90.w,
                      // height: 100.h,
                      color: Colors.white,
                      child: Obx(() => Column(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          Text(TranslationLoader.lanKeys!.dailyCharts!.tr, style: TextStyle(color: state.isDay.value ? AppColors.mainColor : Colors.black, fontSize: 22.sp)),
                          SizedBox(height: 10.h),
                          Visibility(
                            visible: state.isDay.value,
                            child: Container(
                                width: 20.w,
                                height: 2.h,
                                color: state.isDay.value ? AppColors.mainColor : Colors.black
                            ),
                          )
                        ],
                      )),
                    ),
                  ),
                  // SizedBox(width: 20.w,),
                  GestureDetector(
                    onTap: () async {
                      var isDemoMode =  await Storage.getBool(ifIsDemoModeOrNot);
                      if(isDemoMode == false){
                        setState(() {
                          state.isDay.value = false;
                          DateTime dateTime = DateTime.fromMillisecondsSinceEpoch(state.checkListDateTimestamp.value);
                          String beginDate = formatDate(dateTime, [mm]);
                          state.checkListDate.value = beginDate;
                          logic.loadDataByType();
                        });
                      }else{
                        // Get.toNamed(Routers.selectLockTypePage);
                        logic.showToast("演示模式");
                      }
                    },
                    child: Container(
                      width: 90.w,
                      // height: 100.h,
                      color: Colors.white,
                      child: Obx(() => Column(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          Text(TranslationLoader.lanKeys!.monthlyLeaderboard!.tr, style: TextStyle(color: !state.isDay.value ? AppColors.mainColor : Colors.black, fontSize: 22.sp)),
                          SizedBox(height: 10.h),
                          Visibility(
                              visible: !state.isDay.value,
                              child: Container(width: 20.w, height: 2.h, color: !state.isDay.value ? AppColors.mainColor : Colors.black))
                        ],
                      )),
                    ),
                  ),
                ],
              ),
              GestureDetector(
                onTap: () async {
                  var isDemoMode =  await Storage.getBool(ifIsDemoModeOrNot);
                  if(isDemoMode == false){
                    await showDialog(
                        context: Get.context!,
                        builder: (context) {
                          return ShowCalendar(
                              datePickerMode: DatePickerMode.day,
                              selectAction: (dateTime) {
                                setState(() {
                                  state.checkListDateTimestamp.value = dateTime.millisecondsSinceEpoch;
                                  String beginDate = formatDate(dateTime, state.isDay.value ? [mm,'-',dd] : [mm]);
                                  state.checkListDate.value = beginDate;
                                  logic.loadDataByType();
                                  Get.back();
                                });
                              });
                        });
                  }else{
                    // Get.toNamed(Routers.selectLockTypePage);
                    logic.showToast("演示模式");
                  }
                },
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(state.checkListDate.value, style: TextStyle(color: Colors.black, fontSize: 22.sp),),
                    Image.asset('images/icon_grayPullDown.png', width: 50.w, height: 30.w,),
                    SizedBox(width: 10.w,),
                  ],
                ),
              )
            ],
          ),
          // Container(height: 10.h, color: AppColors.mainBackgroundColor,),
        ],
      ),
    );
  }

  Widget middleDayInfo() {
    return Obx(() => Visibility(
      visible: state.isDay.value,
      child: Container(
        height: 80.h,
        color: Colors.white,
        margin: EdgeInsets.only(left: 15.h, right: 15.h, bottom: 10.h),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                SizedBox(height: 5.h),
                Text(state.lateTimes.value, style: TextStyle(color: Colors.black, fontSize: 20.sp)),
                Text(TranslationLoader.lanKeys!.beLate!.tr, style: TextStyle(color: Colors.black, fontSize: 22.sp)),
                SizedBox(height: 5.h),
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                SizedBox(height: 5.h),
                Text(state.earlyTimes.value, style: TextStyle(color: Colors.black, fontSize: 20.sp)),
                Text(TranslationLoader.lanKeys!.leaveEarly!.tr, style: TextStyle(color: Colors.black, fontSize: 22.sp)),
                SizedBox(height: 5.h),
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                SizedBox(height: 5.h),
                Text(state.noPunchTimes.value, style: TextStyle(color: Colors.black, fontSize: 20.sp)),
                Text(TranslationLoader.lanKeys!.noCardPunched!.tr, style: TextStyle(color: Colors.black, fontSize: 22.sp)),
                SizedBox(height: 5.h),
              ],
            ),
          ],
        ),
      ),
    ));
  }

  Widget getBottomList(){
    if((state.isDay.value == true && (state.listType.value == "1")) || (state.isDay.value == true && (state.listType.value == "2"))){
      return bottomDayList();
    }else{
      return bottomMonthList();
    }
  }

  Widget bottomDayList() {
    return Obx(() => state.checkingInDayListData.value.isNotEmpty ? ListView.separated(
      itemCount: state.checkingInDayListData.value.length,
      itemBuilder: (c, index) {
        AttendanceRecordDayList attendanceRecordList= state.checkingInDayListData.value[index];
        return _checkingInListItem(index, attendanceRecordList.headurl, attendanceRecordList.staffName, () {
              Get.toNamed(Routers.checkingInDetailPage, arguments: {
                // "getKeyInfosData": state.getKeyInfosData.value,
                "companyId": state.companyId.value,
                "staffId": attendanceRecordList.staffId,
                "staffName": attendanceRecordList.staffName,
              });
            });
      },
      separatorBuilder: (context, index) {
        return const Divider(height: 1, color: AppColors.greyLineColor);
      },
    ) : NoData(noDataHeight: 1.sh - ScreenUtil().statusBarHeight*2 - 64.h - 280.h - 90.h,));
  }

  Widget bottomMonthList() {
    return Obx(() => state.checkingInMonthListData.value.isNotEmpty ? ListView.separated(
      itemCount: state.checkingInMonthListData.value.length,
      itemBuilder: (c, index) {
        AttendanceRecordMonthList attendanceRecordList= state.checkingInMonthListData.value[index];
        return _checkingInListItem(index, attendanceRecordList.headurl, attendanceRecordList.staffName, () {
          Get.toNamed(Routers.checkingInDetailPage, arguments: {
            "companyId": state.companyId.value,
            "staffId": attendanceRecordList.staffId,
            "staffName": attendanceRecordList.staffName,
          });
        });
      },
      separatorBuilder: (context, index) {
        return const Divider(height: 1, color: AppColors.greyLineColor);
      },
    ) : NoData(noDataHeight: 1.sh -  - ScreenUtil().statusBarHeight - 280.h - 90.h,));
  }

  Widget _checkingInListItem(int index, String? headUrl, String? name, Function() action) {
    return GestureDetector(
      onTap: action,
      child: Container(
        // height: 80.h,
        padding: EdgeInsets.only(left: 20.w, right: 20.w, top: 10.h, bottom: 10.h),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.w),
        ),
        child: Row(
          children: [
            SizedBox(width: 20.w,),
            Text("${index+1}", style: TextStyle(fontSize: 20.sp),),
            SizedBox(width: 20.w,),
            Image.asset('images/controls_user.png', width: 60.w, height: 60.w,),
            // Container(
            //     width: 60.h,
            //     height: 60.h,
            //     decoration: BoxDecoration(
            //       color: AppColors.mainColor,
            //       border: Border.all(width: 1, color: AppColors.mainColor),
            //       borderRadius: BorderRadius.circular(30.h),
            //     ),
            //     padding: EdgeInsets.all(10.w),
            //     child: Image.asset(
            //       'images/controls_user.png',
            //       width: 30.w,
            //       height: 30.w,
            //       color: Colors.white,
            //     )),
            SizedBox(width: 20.w),
            Expanded(
              child: Text(name!, style: TextStyle(fontSize: 24.sp),),
            ),
            SizedBox(width: 20.h),
            Image.asset("images/icon_right_grey.png", width: 21.w, height: 21.w,),
            SizedBox(width: 20.h),
          ],
        ),
      ),
    );
  }

  Widget titleWidget() {
    return GestureDetector(
      onTap: () async {
        var isDemoMode =  await Storage.getBool(ifIsDemoModeOrNot);
        if(isDemoMode == false){
          showListType();
        }else{
          // Get.toNamed(Routers.selectLockTypePage);
          logic.showToast("演示模式");
        }
      },
      child: Obx(() => Container(
        // width: 200.w,
        // height: 60.h,
        color: AppColors.mainColor,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(state.listTypeStr.value, style: TextStyle(color: Colors.white, fontSize: 26.sp),),
            SizedBox(width: 5.w,),
            Image.asset('images/main/icon_lockDetail_checkIn_topTitle.png', width: 22.w, height: 16.w, fit: BoxFit.fill,)
          ],
        ),
      )),
    );
  }

  void showListType() {
    var list = [
      TranslationLoader.lanKeys!.earlyArrivalList!.tr,
      TranslationLoader.lanKeys!.lateList!.tr,
      TranslationLoader.lanKeys!.hardWorkingList!.tr
    ];
    ShowBottomSheetTool().showSingleRowPicker(
        //上下文
        context,
        //默认的索引
        normalIndex: 0,
        title: TranslationLoader.lanKeys!.rankingList!.tr,
        cancelTitle: TranslationLoader.lanKeys!.cancel!.tr,
        sureTitle: TranslationLoader.lanKeys!.sure!.tr,
        //要显示的列表
        //可自定义数据适配器
        //adapter: PickerAdapter(),
        data: list,
        //选择事件的回调
        clickCallBack: (int index, var str) {
          setState(() {
            state.listTypeStr.value = str.toString();
            state.isDay.value = true;
            if(index == 0){
              state.listType.value = "1";
            }else if(index == 1){
              state.listType.value = "2";
            }else if(index == 2){
              state.listType.value = "3";
            }
            logic.loadDataByType();
          });
        });
  }

  String getTopImg(){
    if(state.listType.value == "1"){
      return "images/main/icon_lockDetail_checkInRanking_zd.png";
    }else if(state.listType.value == "2"){
      return "images/main/icon_lockDetail_checkInRanking_cd.png";
    }else{
      return "images/main/icon_lockDetail_checkInRanking_qf.png";
    }
  }

  String getTopTitle(){
    if(state.listType.value == "1"){
      return "无考勤记录";
    }else if(state.listType.value == "2"){
      return "大家干劲十足";
    }else{
      return "工作时长未出炉";
    }
  }
}