import 'package:flutter/material.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/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, index);
      },
    );
  }

  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, () {
          if (state.selectVideoLogList.value.isNotEmpty) {
            Get.toNamed(Routers.videoLogDownLoadPage, arguments: <String, List<RecordListData>>{
              'downloadVideoLogList': state.selectVideoLogList.value
            });
          } else {
            logic.showToast('请选择要下载的视频');
          }
        }),
        SizedBox(width: 100.w),
        bottomBtnItemWidget(
            'images/main/icon_lockDetail_monitoringDeletVideo.png',
            '删除'.tr,
            AppColors.mainColor, () {
          if (state.selectVideoLogList.value.isNotEmpty) {
            logic.deleteLockCloudStorageList();
          } else {
            logic.showToast('请选择要删除的视频'.tr);
          }
        })
      ]),
    );
  }

  Widget bottomBtnItemWidget(
      String iconUrl, String name, Color backgroundColor, 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))
            ],
          )),
    );
  }
}