import 'package:cached_network_image/cached_network_image.dart';
import 'package:date_format/date_format.dart';
import 'package:flutter/cupertino.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 'package:star_lock/main/lockDetail/checkingIn/checkingInList/checkingInList_state.dart';
import 'package:star_lock/main/lockMian/entity/lockListInfo_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 'checkingInListDay_entity.dart';
import 'checkingInListSeletMonth_page.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 CheckingInListLogic logic = Get.put(CheckingInListLogic());
  final CheckingInListState 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: <Widget>[
          if (state.getKeyInfosData.value.keyRight == 1)
            GestureDetector(
                onTap: () async {
                  final bool? isDemoMode =
                      await Storage.getBool(ifIsDemoModeOrNot);
                  if (isDemoMode == false) {
                    Get.toNamed(Routers.checkingInSetPage,
                        arguments: <String, LockListInfoItemEntity>{
                          'getKeyInfosData': state.getKeyInfosData.value,
                        });
                  } else {
                    // Get.toNamed(Routers.selectLockTypePage);
                    logic.showToast('演示模式'.tr);
                  }
                },
                child: Image.asset(
                  'images/main/icon_lockDetail_checkIn_set.png',
                  width: 36.w,
                  height: 36.w,
                ))
          else
            Container(),
          SizedBox(width: 30.w),
        ],
      ),
      body: Column(
        children: <Widget>[
          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: <Widget>[
          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: <Widget>[
              // SizedBox(width: 30.w,),
              Expanded(
                child: Row(
                  children: <Widget>[
                    SizedBox(
                      width: 20.w,
                    ),
                    GestureDetector(
                      onTap: () async {
                        final bool? isDemoMode =
                            await Storage.getBool(ifIsDemoModeOrNot);
                        if (isDemoMode == false) {
                          setState(() {
                            state.isDay.value = true;
                            final DateTime dateTime =
                                DateTime.fromMillisecondsSinceEpoch(
                                    state.checkListDateTimestamp.value);
                            final String beginDate =
                                formatDate(dateTime, <String>[mm, '-', dd]);
                            state.checkListDate.value = beginDate;
                            logic.loadDataByType();
                          });
                        } else {
                          // Get.toNamed(Routers.selectLockTypePage);
                          logic.showToast('演示模式'.tr);
                        }
                      },
                      child: Container(

                        // height: 100.h,
                        color: Colors.white,
                        child: Obx(() => Column(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: <Widget>[
                                Text('日榜'.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 {
                        final bool? isDemoMode =
                            await Storage.getBool(ifIsDemoModeOrNot);
                        if (isDemoMode == false) {
                          setState(() {
                            state.isDay.value = false;
                            final DateTime dateTime =
                                DateTime.fromMillisecondsSinceEpoch(
                                    state.checkListDateTimestamp.value);
                            final String beginDate =
                                formatDate(dateTime, <String>[mm]);
                            state.checkListDate.value = beginDate;
                            logic.loadDataByType();
                          });
                        } else {
                          // Get.toNamed(Routers.selectLockTypePage);
                          logic.showToast('演示模式'.tr);
                        }
                      },
                      child: Container(

                        // height: 100.h,
                        color: Colors.white,
                        child: Obx(() => Column(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: <Widget>[
                                Text('月榜'.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 {
                  final bool? isDemoMode = await Storage.getBool(ifIsDemoModeOrNot);
                  if (isDemoMode == false) {
                    await showDialog(
                        context: Get.context!,
                        builder: (BuildContext context) {
                          if(state.isDay.value){
                            return ShowCalendar(
                                datePickerMode: DatePickerMode.day,
                                selectAction: (DateTime dateTime) {
                                  setState(() {
                                    state.checkListDateTimestamp.value = dateTime.millisecondsSinceEpoch;
                                    final String beginDate = formatDate(dateTime, state.isDay.value ? <String>[mm, '-', dd] : <String>[mm]);
                                    state.checkListDate.value = beginDate;
                                    logic.loadDataByType();
                                    Get.back();
                                  });
                                });
                          }else{
                            final int timestamp = state.checkListDateTimestamp.value;
                            final DateTime dateTime = DateTime.fromMillisecondsSinceEpoch(timestamp);
                            return CheckingInListSeletMonthPage(selectYear: dateTime.year, selectMonth: int.parse(state.checkListDate.value), selectAction: (DateTime dateTime){
                              setState(() {
                                state.checkListDateTimestamp.value = dateTime.millisecondsSinceEpoch;
                                final String beginDate = formatDate(dateTime, state.isDay.value ? <String>[mm, '-', dd] : <String>[mm]);
                                state.checkListDate.value = beginDate;
                                logic.loadDataByType();
                              });
                            });
                          }
                        });
                  } else {
                    // Get.toNamed(Routers.selectLockTypePage);
                    logic.showToast('演示模式'.tr);
                  }
                },
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    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: <Widget>[
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    SizedBox(height: 5.h),
                    Text(state.lateTimes.value,
                        style: TextStyle(color: Colors.black, fontSize: 20.sp)),
                    Text('迟到'.tr,
                        style: TextStyle(color: Colors.black, fontSize: 22.sp)),
                    SizedBox(height: 5.h),
                  ],
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    SizedBox(height: 5.h),
                    Text(state.earlyTimes.value,
                        style: TextStyle(color: Colors.black, fontSize: 20.sp)),
                    Text('早退'.tr,
                        style: TextStyle(color: Colors.black, fontSize: 22.sp)),
                    SizedBox(height: 5.h),
                  ],
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    SizedBox(height: 5.h),
                    Text(state.noPunchTimes.value,
                        style: TextStyle(color: Colors.black, fontSize: 20.sp)),
                    Text('未打卡'.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.isNotEmpty
        ? ListView.separated(
            itemCount: state.checkingInDayListData.length,
            itemBuilder: (BuildContext c, int index) {
              final AttendanceRecordDayList attendanceRecordList =
                  state.checkingInDayListData[index];
              return _checkingInListItem(
                  index,
                  attendanceRecordList.headurl,
                  attendanceRecordList.staffName,
                  attendanceRecordList.attendanceType, () {
                Get.toNamed(Routers.checkingInDetailPage,
                    arguments: <String, Object?>{
                      // "getKeyInfosData": state.getKeyInfosData.value,
                      'companyId': state.companyId.value,
                      'staffId': attendanceRecordList.staffId,
                      'staffName': attendanceRecordList.staffName,
                    });
              });
            },
            separatorBuilder: (BuildContext context, int 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.isNotEmpty
        ? ListView.separated(
            itemCount: state.checkingInMonthListData.length,
            itemBuilder: (BuildContext c, int index) {
              final AttendanceRecordMonthList attendanceRecordList =
                  state.checkingInMonthListData[index];
              return _checkingInListItem(
                  index,
                  attendanceRecordList.headurl,
                  attendanceRecordList.staffName,
                  attendanceRecordList.attendanceType, () {
                Get.toNamed(Routers.checkingInDetailPage,
                    arguments: <String, Object?>{
                      'companyId': state.companyId.value,
                      'staffId': attendanceRecordList.staffId,
                      'staffName': attendanceRecordList.staffName,
                    });
              });
            },
            separatorBuilder: (BuildContext context, int 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, int? type, 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: <Widget>[
            SizedBox(
              width: 20.w,
            ),
            Text(
              '${index + 1}',
              style: TextStyle(fontSize: 20.sp),
            ),
            SizedBox(
              width: 20.w,
            ),
            if (headUrl == null || headUrl == '')
              Image.asset(
                getTypeIcon(type ?? 0),
                width: 60.w,
                height: 60.w,
              )
            else
              ClipRRect(
                borderRadius: BorderRadius.circular(100.w),
                child: CachedNetworkImage(
                  width: 60.w,
                  height: 60.w,
                  imageUrl: headUrl,
                  placeholder: (BuildContext context, String url) =>
                      const SizedBox(),
                  errorWidget:
                      (BuildContext context, String url, Object error) =>
                          Container(
                    color: const Color(0xffEBF4FF),
                    child: Center(
                        child: Text(
                      name!.substring(0, 2),
                      style: TextStyle(
                          fontSize: 22.sp, color: const Color(0xff7F9CF5)),
                    )),
                  ),
                ),
              ),
            SizedBox(width: 20.w),
            Expanded(
              child: Text(
                name!,
                maxLines: 3,
                overflow: TextOverflow.ellipsis,
                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),
          ],
        ),
      ),
    );
  }

  // 1APP 2密码 3卡 4指纹
  String getTypeIcon(int type) {
    String title = 'images/controls_user.png';
    switch (type) {
      case 1:
        // 蓝牙开锁
        title = 'images/controls_user.png';
        break;
      case 2:
        // 密码开锁
        title = 'images/icon_password.png';
        break;
      case 3:
        // ic卡
        title = 'images/icon_card.png';
        break;
      case 4:
        // 指纹开锁
        title = 'images/icon_fingerprint.png';
        break;
      default:
        break;
    }
    return title;
  }

  Widget titleWidget() {
    return GestureDetector(
      onTap: () async {
        final bool? isDemoMode = await Storage.getBool(ifIsDemoModeOrNot);
        if (isDemoMode == false) {
          showListType();
        } else {
          // Get.toNamed(Routers.selectLockTypePage);
          logic.showToast('演示模式'.tr);
        }
      },
      child: Obx(() => Container(
            // width: 200.w,
            // height: 60.h,
            color: AppColors.mainColor,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                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() {
    final List<String> list = <String>[
      '早到榜'.tr,
      '迟到榜'.tr,
      '勤奋榜'.tr
    ];
    ShowBottomSheetTool().showSingleRowPicker(
        //上下文
        context,
        //默认的索引
        normalIndex: 0,
        title: '排列方式'.tr,
        cancelTitle: '取消'.tr,
        sureTitle: '确定'.tr,
        //要显示的列表
        //可自定义数据适配器
        //adapter: PickerAdapter(),
        data: list,
        //选择事件的回调
        clickCallBack: (int index, Object 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 '无考勤记录'.tr;
    } else if (state.listType.value == '2') {
      return '大家干劲十足'.tr;
    } else {
      return '工作时长未出炉'.tr;
    }
  }
}