import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/appRouters.dart';
import 'package:star_lock/main/lockDetail/videoLog/editVideoLog/editVideoLog_state.dart';
import 'package:star_lock/main/lockDetail/videoLog/videoLog/videoLog_entity.dart';
import 'package:star_lock/main/lockDetail/videoLog/widget/full_screenImage_page.dart';
import 'package:star_lock/main/lockDetail/videoLog/widget/video_thumbnail_image.dart';
import 'package:star_lock/tools/dateTool.dart';

import '../../../../app_settings/app_colors.dart';
import '../../../../tools/titleAppBar.dart';
import 'editVideoLog_logic.dart';

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

  @override
  State<EditVideoLogPage> createState() => _EditVideoLogPageState();
}

class _EditVideoLogPageState extends State<EditVideoLogPage> {
  final EditVideoLogLogic logic = Get.put(EditVideoLogLogic());
  final EditVideoLogState state = Get.find<EditVideoLogLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: TitleAppBar(
        barTitle: '${'已选'.tr}${state.selectVideoLogList.value.length}${'项'.tr}',
        haveBack: true,
        backgroundColor: AppColors.mainColor,
        actionsList: <Widget>[
          TextButton(
            child: Text(
              '全选'.tr,
              style: TextStyle(color: Colors.white, fontSize: 24.sp),
            ),
            onPressed: () async {
              state.isSelectAll.value = !state.isSelectAll.value;

              if (state.selectVideoLogList.isEmpty) {
                state.isSelectAll.value = true;
              }
              if (state.selectVideoLogList.length ==
                  state.videoLogList.length) {
                state.isSelectAll.value = false;
              }
              if (state.isSelectAll.value == true) {
                state.selectVideoLogList.clear();
                for (var element in state.videoLogList) {
                  element.recordList!.forEach((element) {
                    element.isSelect = true;
                    state.selectVideoLogList.add(element);
                  });
                }
              } else {
                state.selectVideoLogList.clear();
                for (var element in state.videoLogList) {
                  element.recordList!.forEach((element) {
                    element.isSelect = false;
                    state.selectVideoLogList.remove(element);
                  });
                }
              }
              setState(() {});
            },
          ),
        ],
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Obx(() => ListView.builder(
                itemCount: state.videoLogList.length,
                itemBuilder: (BuildContext c, int index) {
                  final CloudStorageData item = state.videoLogList[index];
                  return Column(
                    children: <Widget>[
                      Container(
                          margin: EdgeInsets.only(
                              left: 20.w, top: 15.w, bottom: 15.w),
                          child: Row(children: <Widget>[
                            Text(item.date ?? '',
                                style: TextStyle(fontSize: 20.sp)),
                          ])),
                      mainListView(index, item)
                    ],
                  );
                })),
          ),
          bottomBottomBtnWidget()
        ],
      ),
    );
  }

  double itemW = (1.sw - 15.w * 4) / 3;
  double itemH = (1.sw - 15.w * 4) / 3 + 40.h;

  Widget mainListView(int index, CloudStorageData itemData) {
    return GridView.builder(
      padding: EdgeInsets.only(left: 15.w, right: 15.w),
      itemCount: itemData.recordList!.length,
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          //横轴元素个数
          crossAxisCount: 3,
          //纵轴间距
          mainAxisSpacing: 10.w,
          // 横轴间距
          crossAxisSpacing: 15.w,
          //子组件宽高长度比例
          childAspectRatio: itemW / itemH),
      itemBuilder: (BuildContext context, int index) {
        final RecordListData recordData = itemData.recordList![index];
        return videoItem(recordData);
      },
    );
  }

  // Widget videoItem(RecordListData recordData, int index) {
  //   return Container(
  //     width: itemW,
  //     height: itemH,
  //     color: Colors.white,
  //     child: GestureDetector(
  //         onTap: () {
  //           recordData.isSelect = !recordData.isSelect!;
  //           if (recordData.isSelect! == true) {
  //             state.selectVideoLogList.add(recordData);
  //           } else {
  //             state.selectVideoLogList.remove(recordData);
  //           }
  //           setState(() {});
  //         },
  //         child: Stack(
  //           children: <Widget>[
  //             Column(
  //               children: <Widget>[
  //                 Container(
  //                   width: itemW,
  //                   height: itemW,
  //                   margin: const EdgeInsets.all(0),
  //                   color: Colors.white,
  //                   child: ClipRRect(
  //                     borderRadius: BorderRadius.circular(10.w),
  //                     child: Image(
  //                         fit: BoxFit.cover,
  //                         image: Image.network(recordData.imagesUrl ??
  //                                 'images/icon_video_placeholder.jpg')
  //                             .image),
  //                   ),
  //                 ),
  //                 SizedBox(height: 5.h),
  //                 Text(
  //                     DateTool()
  //                         .dateToYMDHNString(recordData.operateDate.toString()),
  //                     textAlign: TextAlign.center,
  //                     style: TextStyle(fontSize: 18.sp))
  //               ],
  //             ),
  //             Positioned(
  //                 top: 0.w,
  //                 right: 0.w,
  //                 child: Image(
  //                     width: 36.w,
  //                     height: 36.w,
  //                     image: state.selectVideoLogList.value.contains(recordData)
  //                         ? const AssetImage('images/icon_round_select.png')
  //                         : const AssetImage('images/icon_round_unSelect.png')))
  //           ],
  //         )),
  //   );
  // }

  Widget bottomBottomBtnWidget() {
    return SizedBox(
      width: 1.sw,
      child:
          Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
        bottomBtnItemWidget(
          'images/main/icon_lockDetail_monitoringDownloadVideo.png',
          '下载'.tr,
          Colors.white,
          _onDownLoadClick,
        ),
        SizedBox(width: 100.w),
        bottomBtnItemWidget(
          'images/main/icon_lockDetail_monitoringDeletVideo.png',
          '删除'.tr,
          AppColors.mainColor,
          _onDelClick,
        )
      ]),
    );
  }

  Future<void> _onDownLoadClick() async {
    if (state.selectVideoLogList.value.isNotEmpty) {
      double _progress = 0.0;
      // 开始下载
      // 显示进度条
      EasyLoading.showProgress(_progress, status: '加载数据中'.tr);

      // 模拟进度更新
      for (int i = 0; i <= state.selectVideoLogList.length - 1; i++) {
        final item = state.selectVideoLogList.value[i];

        // 判断 imagesUrl 是否为空
        if (item.imagesUrl != null && item.imagesUrl!.isNotEmpty) {
          await logic.downloadAndSaveToGallery(item.imagesUrl!, 'image_$i.jpg');
        }

        // 判断 videoUrl 是否为空
        if (item.videoUrl != null && item.videoUrl!.isNotEmpty) {
          await logic.downloadAndSaveToGallery(item.videoUrl!, 'video_$i.mp4');
        }

        // 更新进度
        _progress = (i + 1) / state.selectVideoLogList.length;
        EasyLoading.showProgress(_progress, status: '加载数据中'.tr);
      }

      // 加载完成后隐藏进度条
      EasyLoading.dismiss();
      EasyLoading.showSuccess('下载完成,请到相册查看'.tr);
      state.selectVideoLogList.clear();
      setState(() {});
      // Get.toNamed(Routers.videoLogDownLoadPage,
      //     arguments: <String, List<RecordListData>>{
      //       'downloadVideoLogList': state.selectVideoLogList.value
      //     });
    } else {
      logic.showToast('请选择要下载的视频');
    }
  }

  Future<void> _onDelClick() async {
    if (state.selectVideoLogList.value.isNotEmpty) {
      await logic.deleteLockCloudStorageList();
      setState(() {});
    } else {
      logic.showToast('请选择要删除的视频'.tr);
    }
  }

  Widget bottomBtnItemWidget(
    String iconUrl,
    String name,
    Color backgroundColor,
    Future<void> Function() onClick,
  ) {
    final double wh = 40.w;
    return GestureDetector(
      onTap: onClick,
      child: SizedBox(
        height: 140.h,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            SizedBox(height: 30.w),
            Image.asset(iconUrl, width: wh, height: wh, fit: BoxFit.fitWidth),
            SizedBox(height: 10.w),
            Expanded(
              child: Text(name,
                  style: TextStyle(fontSize: 22.sp),
                  textAlign: TextAlign.center),
            )
          ],
        ),
      ),
    );
  }

  Widget videoItem(RecordListData recordData) {
    return GestureDetector(
      onTap: () {
        if (recordData.videoUrl != null && recordData.videoUrl!.isNotEmpty) {
          Get.toNamed(Routers.videoLogDetailPage, arguments: <String, Object>{
            'recordData': recordData,
            'videoDataList': state.videoLogList.value
          });
        } else if (recordData.imagesUrl != null &&
            recordData.imagesUrl!.isNotEmpty) {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => FullScreenImagePage(
                imageUrl: recordData.imagesUrl!,
              ),
            ),
          );
        }
      },
      child: Stack(
        children: [
          SizedBox(
            width: itemW,
            height: itemH,
            child: Column(
              children: <Widget>[
                Container(
                  width: itemW,
                  height: itemW,
                  margin: const EdgeInsets.all(0),
                  color: Colors.white,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(10.w),
                    child: _buildImageOrVideoItem(recordData),
                  ),
                ),
                SizedBox(height: 5.h),
                Text(
                  DateTool()
                      .dateToYMDHNString(recordData.operateDate.toString()),
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 18.sp),
                )
              ],
            ),
          ),
          Positioned(
            top: 0.w,
            right: 0.w,
            child: GestureDetector(
              onTap: () {
                recordData.isSelect = !recordData.isSelect!;
                if (recordData.isSelect! == true) {
                  state.selectVideoLogList.add(recordData);
                } else {
                  state.selectVideoLogList.remove(recordData);
                }
                setState(() {});
              },
              child: Image(
                width: 36.w,
                height: 36.w,
                image: state.selectVideoLogList.value.contains(recordData)
                    ? const AssetImage('images/icon_round_select.png')
                    : const AssetImage('images/icon_round_unSelect.png'),
              ),
            ),
          )
        ],
      ),
    );
  }

  _buildImageOrVideoItem(RecordListData recordData) {
    if (recordData.videoUrl != null && recordData.videoUrl!.isNotEmpty) {
      return _buildVideoItem(recordData);
    } else {
      return _buildImageItem(recordData);
    }
  }

  _buildVideoItem(RecordListData recordData) {
    return VideoThumbnailImage(videoUrl: recordData.videoUrl!);
  }

  _buildImageItem(RecordListData recordData) {
    return RotatedBox(
      quarterTurns: -1,
      child: Image.network(
        recordData.imagesUrl!,
        fit: BoxFit.cover,
        errorBuilder:
            (BuildContext context, Object error, StackTrace? stackTrace) {
          // 图片加载失败时显示错误图片
          return RotatedBox(
            quarterTurns: -1,
            child: Image.asset(
              'images/icon_unHaveData.png', // 错误图片路径
              fit: BoxFit.cover,
            ),
          );
        },
      ),
    );
  }
}