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/flavors.dart';
import 'package:star_lock/main/lockDetail/videoLog/videoLog/videoLog_entity.dart';
import 'package:star_lock/tools/dateTool.dart';
import 'package:star_lock/tools/noData.dart';

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

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

  @override
  State<VideoLogPage> createState() => _VideoLogPageState();
}

class _VideoLogPageState extends State<VideoLogPage> {
  final logic = Get.put(VideoLogLogic());
  final state = Get.find<VideoLogLogic>().state;

  @override
  initState() {
    super.initState();
    logic.getLockCloudStorageList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: TitleAppBar(
        haveTitleWidget: true,
        titleWidget: navBtn(),
        haveBack: true,
        backgroundColor: AppColors.mainColor,
      ),
      body: Column(
        children: [
          // 云存顶部
          Visibility(visible: !state.isNavLocal.value, child: vipTip()),
          // 本地顶部
          Visibility(visible: state.isNavLocal.value, child: localTip()),
          // title加编辑按钮
          editVideoTip(),
          Obx(() => Visibility(
              visible: !state.isNavLocal.value,
              child: Expanded(
                  child: ListView.builder(
                      itemCount: state.videoLogList.length,
                      itemBuilder: (c, index) {
                        CloudStorageData item = state.videoLogList[index];
                        return Column(
                          children: [
                            Container(
                                margin: EdgeInsets.only(
                                    left: 20.w, top: 15.w, bottom: 15.w),
                                child: Row(children: [
                                  Text(item.date ?? "",
                                      style: TextStyle(fontSize: 20.sp)),
                                ])),
                            mainListView(index, item)
                          ],
                        );
                      })))),
          // 本地顶部
          Visibility(
              visible: state.isNavLocal.value,
              child: Expanded(
                  child: state.localList.isNotEmpty
                      ? ListView.builder(
                          itemCount: 5,
                          itemBuilder: (c, index) {
                            return Column(
                              children: [
                                Container(
                                    margin: EdgeInsets.only(
                                        left: 20.w, top: 15.w, bottom: 15.w),
                                    child: Row(children: [
                                      Text("2023.10.2$index",
                                          style: TextStyle(fontSize: 20.sp)),
                                    ])),
                                mainListView(index, CloudStorageData()),
                              ],
                            );
                          })
                      : NoData())),
        ],
      ),
    );
  }

  // nav按钮
  Widget navBtn() {
    return SizedBox(
      width: 300.w,
      // color: Colors.white,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextButton(
              onPressed: () {
                setState(() {
                  state.isNavLocal.value = false;
                });
              },
              child: Obx(() => Text("云存".tr,
                  style: state.isNavLocal.value == true
                      ? TextStyle(
                          color: Colors.grey,
                          fontSize: 26.sp,
                          fontWeight: FontWeight.w600)
                      : TextStyle(
                          color: Colors.white,
                          fontSize: 28.sp,
                          fontWeight: FontWeight.w600)))),
          TextButton(
              onPressed: () {
                setState(() {
                  state.isNavLocal.value = true;
                });
              },
              child: Obx(() => Text("本地".tr,
                  style: state.isNavLocal.value == true
                      ? TextStyle(
                          color: Colors.white,
                          fontSize: 28.sp,
                          fontWeight: FontWeight.w600)
                      : TextStyle(
                          color: Colors.grey,
                          fontSize: 26.sp,
                          fontWeight: FontWeight.w600)))),
        ],
      ),
    );
  }

  // 云存顶部视频
  Widget vipTip() {
    return GestureDetector(
      onTap: () {
        Get.toNamed(Routers.valueAddedServicesHighFunctionPage);
      },
      child: Container(
        height: 150.h,
        margin: EdgeInsets.all(15.w),
        padding:
            EdgeInsets.only(left: 20.w, top: 20.w, bottom: 20.w, right: 10.w),
        decoration: BoxDecoration(
            color: const Color(0xFFF6F7F8),
            borderRadius: BorderRadius.circular(20.h)),
        child: Row(
          children: [
            Expanded(
                child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("3天滚动储存".tr, style: TextStyle(fontSize: 24.sp)),
                SizedBox(height: 10.h),
                Text("${F.navTitle}${"已为本设备免费提供3大滚动视频储存服务".tr}",
                    style: TextStyle(fontSize: 22.sp, color: Colors.grey)),
              ],
            )),
            SizedBox(width: 15.w),
            Text("去升级".tr, style: TextStyle(fontSize: 22.sp)),
            Image(
                width: 40.w,
                height: 24.w,
                image: const AssetImage("images/icon_right_black.png"))
          ],
        ),
      ),
    );
  }

  // 本地顶部
  Widget localTip() {
    return GestureDetector(
      onTap: () {
        Get.toNamed(Routers.videoLogDownLoadPage);
      },
      child: Container(
        // height: 130.h,
        margin: EdgeInsets.all(15.w),
        padding:
            EdgeInsets.only(left: 20.w, top: 30.w, bottom: 30.w, right: 10.w),
        decoration: BoxDecoration(
            color: const Color(0xFFF6F7F8),
            borderRadius: BorderRadius.circular(20.h)),
        child: Row(
          children: [
            Expanded(
                child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // SizedBox(height: 20.h),
                Text("下载列表".tr, style: TextStyle(fontSize: 24.sp)),
                SizedBox(height: 15.h),
                Text("暂无下载内容".tr,
                    style: TextStyle(fontSize: 22.sp, color: Colors.grey)),
              ],
            )),
            SizedBox(width: 15.w),
            // Text("去升级", style: TextStyle(fontSize: 24.sp)),
            Image(
                width: 40.w,
                height: 24.w,
                image: const AssetImage("images/icon_right_black.png"))
          ],
        ),
      ),
    );
  }

  // 标题加编辑按钮
  Widget editVideoTip() {
    return Container(
      margin: EdgeInsets.only(left: 20.w),
      child: Row(
        // mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(state.isNavLocal.value == true ? "已下载".tr : "全部视频".tr,
              style: TextStyle(fontSize: 26.sp, fontWeight: FontWeight.w500)),
          Expanded(child: SizedBox(width: 10.w)),
          IconButton(
            icon: Image(
                width: 40.w,
                height: 40.w,
                image: const AssetImage(
                    "images/main/icon_lockDetail_monitoringEditVoice.png")),
            iconSize: 30,
            color: Colors.black54,
            onPressed: () {
              Get.toNamed(Routers.editVideoLogPage,
                  arguments: {"videoDataList": state.videoLogList.value});
            },
          )
          // TextButton(
          //     onPressed: (){
          //
          //     },
          //     child: Image(width: 40.w, height: 40.w, image: const AssetImage("images/main/icon_lockDetail_monitoringEditVoice.png"),)
          // ),
        ],
      ),
    );
  }

  var itemW = (1.sw - 15.w * 4) / 3;
  var 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: 15.w,
          // 横轴间距
          crossAxisSpacing: 15.w,
          //子组件宽高长度比例
          childAspectRatio: itemW / itemH),
      itemBuilder: (context, index) {
        RecordListData recordData = itemData.recordList![index];
        return videoItem(recordData);
      },
    );
  }

  Widget videoItem(RecordListData recordData) {
    return GestureDetector(
      onTap: () {
        Get.toNamed(Routers.videoLogDetailPage, arguments: {
          "recordData": recordData,
          "videoDataList": state.videoLogList.value
        });
      },
      child: SizedBox(
        width: itemW,
        height: itemH,
        child: Column(
          children: [
            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))
          ],
        ),
      ),
    );
  }
}