Clean/lib/module/home/home_view.dart

import 'dart:io';

import 'package:clean/base/base_view.dart';
import 'package:clean/module/home/home_controller.dart';
import 'package:clean/module/image_picker/image_picker_util.dart';
import 'package:clean/resource/assets.gen.dart';
import 'package:clean/resource/string.gen.dart';
import 'package:clean/utils/image_util.dart';
import 'package:get/get.dart';
import 'package:flutter/Material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';

class HomePage extends BaseView<HomeController> {
  const HomePage({super.key});

  @override
  backgroundColor() {
    return Color(0xFF05050D);
  }

  @override
  viewHeight() {
    return double.infinity;
  }

  @override
  Widget buildBody(BuildContext context) {
    // TODO: implement buildBody
    return Stack(
      children: [
        SafeArea(
          child: SingleChildScrollView(
              child: Column(
                children: [
                  titleCard(),
                  storageCard(),
                  similarCard(),
                  quickPhotoCard(),
                  peopleCard(),
                  locationsCard(),
                  screenshotsAndBlurryCard(),
                  SizedBox(height: 40.h),
                ],
              )),
        ),
        IgnorePointer(
          child: Assets.images.bgHome.image(
            width: 360.w,
            height: 234.h,
          ),
        ),
      ],
    );
  }

  Widget titleCard() {
    return Padding(
      padding: EdgeInsets.only(top: 0.h, left: 16.w, right: 16.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            StringName.appName,
            style: TextStyle(
              color: Colors.white,
              fontSize: 24.sp,
              fontWeight: FontWeight.w900,
            ),
          ),
          GestureDetector(
            onTap: () {
              print("home vip");
              controller.usedSpace.value = controller.usedSpace.value + 60;
              controller.freeSpace.value = controller.freeSpace.value - 60;
            },
            child: Assets.images.iconHomeTitleVip
                .image(width: 60.8.w, height: 20.h),
          ),
        ],
      ),
    );
  }

  Widget storageCard() {
    return Container(
        margin: EdgeInsets.only(top: 20.h),
        padding: EdgeInsets.symmetric(horizontal: 16.w),
        width: 328.w,
        height: 146.h,
        decoration: ShapeDecoration(
          color: Colors.white.withValues(alpha: 0.10),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(14.r),
          ),
        ),
        child: Row(
          children: [
            circularChartCard(),
            SizedBox(
              width: 14.w,
            ),
            storageInfoCard(),
          ],
        ));
  }

  Widget circularChartCard() {
    return SizedBox(
      width: 120.00.w,
      child: Obx(() {
        return SfCircularChart(
          series: <CircularSeries>[
            DoughnutSeries<PieData, String>(
              dataSource: [
                PieData('photo Space', controller.photoSpacePercentage,
                    Colors.blue),
                PieData(
                    'Used Space',
                    controller.usedSpacePercentage -
                        controller.photoSpacePercentage,
                    Colors.red),
                PieData(
                  'Unused Space',
                  controller.freeSpacePercentage,
                  Colors.white.withValues(alpha: 0.10000000149011612),
                ),
              ],
              xValueMapper: (PieData data, _) => data.label,
              yValueMapper: (PieData data, _) => data.value,
              pointColorMapper: (PieData data, _) => data.color,
              cornerStyle: CornerStyle.bothFlat,
              radius: '100%',
              // 设置饼图的半径
              innerRadius: '80%',
              // 设置饼图的内半径
              startAngle: 0,
              // 设置开始角度
              endAngle: 360, // 设置结束角度
            ),
          ],
          annotations: <CircularChartAnnotation>[
            CircularChartAnnotation(
              widget: Container(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          Obx(() {
                            return Text(
                              controller.usedSpacePercentage.toStringAsFixed(0),
                              textAlign: TextAlign.end,
                              style: TextStyle(
                                color: Colors.white
                                    .withValues(alpha: 0.8999999761581421),
                                fontSize: 30.sp,
                                height: 1,
                                fontWeight: FontWeight.w400,
                              ),
                            );
                          }),
                          Text(
                            '%',
                            textAlign: TextAlign.end,
                            style: TextStyle(
                              color: Colors.white
                                  .withValues(alpha: 0.8999999761581421),
                              fontSize: 14.87.r,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ],
                      ),
                      Text(
                        'used',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: Colors.white.withValues(
                              alpha: 0.6000000238418579),
                          fontSize: 14.87.r,
                          height: 1,
                          fontWeight: FontWeight.w500,
                        ),
                      )
                    ],
                  )),
              horizontalAlignment: ChartAlignment.center,
              verticalAlignment: ChartAlignment.center,
              radius: '0%',
            ),
          ],
        );
      }),
    );
  }

  Widget storageInfoCard() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
          height: 24.h,
        ),
        Text(
          'Storage Used',
          style: TextStyle(
            color: Colors.white,
            fontSize: 16.sp,
            fontWeight: FontWeight.w500,
          ),
        ),
        Row(
          children: [
            Obx(() {
              return Text.rich(
                TextSpan(
                  children: [
                    TextSpan(
                      text: ImagePickerUtil.formatSize(
                          controller.usedSpace.value),
                      style: TextStyle(
                        color: Color(0xFFFC4C4F),
                        fontSize: 13.sp,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                    TextSpan(
                      text: 'GB',
                      style: TextStyle(
                        color: Color(0xFFFC4C4F),
                        fontSize: 13.sp,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ],
                ),
                textAlign: TextAlign.center,
              );
            }),
            Text(
              ' / ',
              style: TextStyle(
                color: Colors.white.withValues(alpha: 0.6000000238418579),
                fontSize: 13.sp,
                fontWeight: FontWeight.w500,
              ),
            ),
            Obx(() {
              return Text.rich(
                TextSpan(
                  children: [
                    TextSpan(
                      text: ImagePickerUtil.formatSize(
                          controller.totalSpace.value),
                      style: TextStyle(
                        color:
                        Colors.white.withValues(alpha: 0.6000000238418579),
                        fontSize: 13.sp,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                    TextSpan(
                      text: 'GB',
                      style: TextStyle(
                        color:
                        Colors.white.withValues(alpha: 0.6000000238418579),
                        fontSize: 13.sp,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ],
                ),
                textAlign: TextAlign.center,
              );
            }),
          ],
        ),
        SizedBox(
          height: 10.h,
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              margin: EdgeInsets.only(top: 7.h),
              width: 6.w,
              height: 6.h,
              decoration: ShapeDecoration(
                color: Color(0xFF0279FB),
                shape: OvalBorder(),
              ),
            ),
            SizedBox(
              width: 3.5.w,
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Photos',
                  textAlign: TextAlign.start,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                Obx(() {
                  return Text(
                    '${controller.photoSpaceStr}',
                    textAlign: TextAlign.start,
                    style: TextStyle(
                      color: Colors.white.withValues(alpha: 0.6499999761581421),
                      fontSize: 13.sp,
                      fontWeight: FontWeight.w400,
                    ),
                  );
                }),
              ],
            ),
            SizedBox(
              width: 10.w,
            ),
            Container(
              margin: EdgeInsets.only(top: 7.h),
              width: 6.w,
              height: 6.h,
              decoration: ShapeDecoration(
                color: Color(0xFFEE4933),
                shape: OvalBorder(),
              ),
            ),
            SizedBox(
              width: 3.5.w,
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'iphone',
                  textAlign: TextAlign.start,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                Obx(() {
                  return Text(
                    '${controller.usedSpace.toStringAsFixed(1)} GB',
                    textAlign: TextAlign.start,
                    style: TextStyle(
                      color: Colors.white.withValues(alpha: 0.6499999761581421),
                      fontSize: 13.sp,
                      fontWeight: FontWeight.w400,
                    ),
                  );
                }),
              ],
            ),
          ],
        ),
      ],
    );
  }

  Widget similarCard() {
    return Container(
      width: 328.w,
      height: 155.h,
      margin: EdgeInsets.only(top: 20.h),
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      decoration: ShapeDecoration(
        color: Colors.white.withValues(alpha: 0.12),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16.r),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(height: 12.h),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Similar',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                  Obx(() {
                    return Text.rich(
                      TextSpan(
                        children: [
                          TextSpan(
                            text: "${ImagePickerUtil.similarPhotoCount.value}",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 12.sp,
                              fontWeight: FontWeight.w400,
                            ),
                          ),
                          TextSpan(
                            text: ' duplicate photos detected',
                            style: TextStyle(
                              color: Colors.white
                                  .withValues(alpha: 0.800000011920929),
                              fontSize: 12.sp,
                              fontWeight: FontWeight.w400,
                            ),
                          ),
                        ],
                      ),
                    );
                  }),
                ],
              ),
              Obx(() {
                return CleanUpButton(
                  label:
                  !controller.isScanned.value ? 'Scanning...' : 'Clean up',
                  size: ImagePickerUtil.formatFileSize(
                      ImagePickerUtil.similarPhotosSize.value),
                  onTap: () {
                    controller.similarCleanClick();
                  },
                );
              }),
            ],
          ),
          // SizedBox(height: 19.h),
          Spacer(),
          Obx(() {
            return Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: List.generate(4, (index) {
                var image = Assets.images.iconHomeNoPhoto.image(
                  width: 146.w * 0.45,
                  height: 146.w * 0.45,
                );
                if (controller.similarPhotos.length > index) {
                  image = AssetEntityImage(
                      width: 146.w,
                      height: 146.w,
                      controller.similarPhotos[index],
                      isOriginal: false,
                      thumbnailSize: const ThumbnailSize.square(300),
                      fit: BoxFit.cover,
                      errorBuilder: (context, error, stackTrace) {
                        return Assets.images.iconHomeNoPhoto.image(
                          width: 146.w * 0.45,
                          height: 146.w * 0.45,
                        );
                      });
                }
                return ImageContainer(
                  size: 70.w,
                  image: image,
                  // AssetEntityImage(
                  //         width: 70.w,
                  //         height: 70.w,
                  //         controller.similarPhotos[index],
                  //         isOriginal: false,
                  //         thumbnailSize: const ThumbnailSize.square(300),
                  //         fit: BoxFit.cover,
                  //         errorBuilder: (context, error, stackTrace) {
                  //           return Assets.images.iconHomeNoPhoto.image(
                  //             width: 70.w * 0.45,
                  //             height: 70.w * 0.45,
                  //           );
                  //         },
                );
              }),
            );
          }),
          Spacer(),
        ],
      ),
    );
  }

  Widget quickPhotoCard() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      margin: EdgeInsets.only(top: 30.h),
      alignment: Alignment.centerLeft,
      child: Text(
        'Quick Photo Clean',
        style: TextStyle(
          color: Colors.white,
          fontSize: 18.sp,
          fontWeight: FontWeight.w700,
        ),
      ),
    );
  }

  Widget peopleCard() {
    return Container(
      margin: EdgeInsets.only(top: 12.h),
      width: 328.w,
      height: 205.h,
      decoration: ShapeDecoration(
        color: Colors.white.withValues(alpha: 0.12),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(14.sp),
        ),
      ),
      child: Stack(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Spacer(),
              Padding(
                padding: EdgeInsets.only(left: 14.0.w),
                child: Text(
                  'People',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16.sp,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
              Spacer(),
              Obx(() {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: List.generate(2, (index) {
                    return ImageContainer(
                      image: controller.peoplePhotos.length < 2
                          ? Assets.images.iconHomeNoPhoto.image(
                        width: 146.w * 0.45,
                        height: 146.w * 0.45,
                      )
                          : AssetEntityImage(
                        width: 146.w,
                        height: 146.w,
                        controller.peoplePhotos[index],
                        isOriginal: false,
                        thumbnailSize: const ThumbnailSize.square(300),
                        fit: BoxFit.cover,
                        errorBuilder: (context, error, stackTrace) {
                          return Assets.images.iconHomeNoPhoto.image(
                            width: 146.w * 0.45,
                            height: 146.w * 0.45,
                          );
                        },
                      ),
                      // Image.file(
                      //   width: 146.w,
                      //   height: 146.w,
                      //   controller.peoplePhotos[index],
                      //   fit: BoxFit.cover,
                      // ),
                      // 可以传入不同的路径
                      size: 146.w,
                    );
                  }),
                );
              }),
              Spacer(),
            ],
          ),
          Positioned(
            bottom: 20.h,
            right: 20.w,
            child: Obx(() {
              return CleanUpButton(
                label: !controller.isScanned.value ? 'Scanning...' : 'Clean up',
                size: ImagePickerUtil.formatFileSize(
                    ImagePickerUtil.peopleSize.value),
                onTap: () {
                  controller.peopleCleanClick();
                },
              );
            }),
          ),
        ],
      ),
    );
  }

  Widget locationsCard() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 12.w),
      margin: EdgeInsets.only(top: 14.h),
      width: 328.w,
      height: 230.h,
      decoration: ShapeDecoration(
        color: Colors.white.withValues(alpha: 0.12),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(14.sp),
        ),
      ),
      child: Stack(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Spacer(),
              Text(
                'Locations',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16.sp,
                  fontWeight: FontWeight.w700,
                ),
              ),
              Spacer(),
              Container(
                width: 304.w,
                height: 171.h,
                clipBehavior: Clip.hardEdge,
                decoration: ShapeDecoration(
                  color: Color(0xFF272C33),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12.r),
                  ),
                ),
                child: Obx(() {
                  return Center(
                    child: controller.locationPhoto.value == null
                        ? Assets.images.iconHomeNoPhoto.image(
                      width: 60.w,
                      height: 60.h,
                    )
                        : AssetEntityImage(
                      width: 304.w,
                      height: 171.h,
                      controller.locationPhoto.value!,
                      isOriginal: false,
                      thumbnailSize: const ThumbnailSize.square(300),
                      fit: BoxFit.cover,
                      errorBuilder: (context, error, stackTrace) {
                        return Assets.images.iconHomeNoPhoto.image(
                          width: 60.w,
                          height: 60.h,
                        );
                      },
                    ),
                    // Image.file(
                    //         width: 304.w,
                    //         height: 171.h,
                    //         controller.locationPhoto.value!,
                    //         fit: BoxFit.cover,
                    //       ),
                  );
                }),
              ),
              Spacer(),
            ],
          ),
          Positioned(
            bottom: 20.h,
            right: 8.w,
            child: Obx(() {
              return CleanUpButton(
                label: !controller.isScanned.value ? 'Scanning...' : 'Clean up',
                size: ImagePickerUtil.formatFileSize(
                    ImagePickerUtil.locationsSize.value),
                onTap: () {
                  controller.locationCleanClick();
                },
              );
            }),
          ),
        ],
      ),
    );
  }

  Widget screenshotsAndBlurryCard() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      margin: EdgeInsets.only(top: 14.h),
      child: Obx(() {
        return Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            _buildCard(
              'Screenshots',
              !controller.isScanned.value ? 'Scanning...' : 'Clean up',
              ImagePickerUtil.formatFileSize(
                  ImagePickerUtil.screenshotsSize.value),
              controller.screenshotPhoto.value == null
                  ? Assets.images.iconHomeNoPhoto.image(
                width: 60.w,
                height: 60.h,
              )
                  : AssetEntityImage(
                width: 144.w,
                height: 142.h,
                controller.screenshotPhoto.value!,
                isOriginal: false,
                thumbnailSize: const ThumbnailSize.square(300),
                fit: BoxFit.cover,
                errorBuilder: (context, error, stackTrace) {
                  return Assets.images.iconHomeNoPhoto.image(
                    width: 60.w,
                    height: 60.h,
                  );
                },
              ),
              onTap: () {
                controller.screenshotCleanClick();
              },
            ),
            _buildCard(
                'Blurry',
                !controller.isScanned.value ? 'Scanning...' : 'Clean up',
                ImagePickerUtil.formatFileSize(
                    ImagePickerUtil.blurrySize.value),
                controller.blurryPhoto.value == null
                    ? Assets.images.iconHomeNoPhoto.image(
                  width: 60.w,
                  height: 60.h,
                )
                    : AssetEntityImage(
                  width: 144.w,
                  height: 142.h,
                  controller.blurryPhoto.value!,
                  isOriginal: false,
                  thumbnailSize: const ThumbnailSize.square(300),
                  fit: BoxFit.cover,
                  errorBuilder: (context, error, stackTrace) {
                    return Assets.images.iconHomeNoPhoto.image(
                      width: 60.w,
                      height: 60.h,
                    );
                  },
                ), onTap: () {
              controller.blurryCleanClick();
            }),
          ],
        );
      }),
    );
  }

  Widget _buildCard(String title, String buttonLabel, String size, Image image,
      {required Function() onTap}) {
    return Stack(
      children: [
        Container(
          width: 160.w,
          height: 189.h,
          decoration: ShapeDecoration(
            color: Colors.white.withValues(alpha: 0.12),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(14.r),
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Spacer(),
              Container(
                alignment: Alignment.centerLeft,
                padding: EdgeInsets.only(left: 9.w),
                child: Text(
                  title,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16.sp,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
              Spacer(),
              Container(
                width: 144.w,
                height: 142.h,
                clipBehavior: Clip.hardEdge,
                decoration: ShapeDecoration(
                  color: Color(0xFF272C33),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12.r),
                  ),
                ),
                child: Center(
                  child: image,
                ),
              ),
              Spacer(),
            ],
          ),
        ),
        Positioned(
          bottom: 16.h,
          right: 16.w,
          child: CleanUpButton(
            label: buttonLabel,
            size: size,
            onTap: onTap,
          ),
        ),
      ],
    );
  }
}

class CleanUpButton extends StatelessWidget {
  final String label;
  final String size;
  final Function() onTap;

  const CleanUpButton({
    super.key,
    required this.label,
    required this.size,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: onTap,
        child: Container(
          width: 94.w,
          height: 44.h,
          decoration: ShapeDecoration(
            color: Color(0xFF0279FB),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.r),
            ),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Spacer(),
                  Text(
                    label,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 12.sp,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                  Text(
                    size,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.sp,
                      height: 1,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                  Spacer(),
                ],
              ),
              Assets.images.iconHomeRightArrow.image(
                width: 6.52.w,
                height: 6.52.h,
              ),
            ],
          ),
        ));
  }
}

class ImageContainer extends StatelessWidget {
  final Image image;
  final double size;

  const ImageContainer({
    super.key,
    required this.image,
    required this.size,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size,
      height: size,
      clipBehavior: Clip.hardEdge,
      decoration: BoxDecoration(
        color: Color(0xFF272C33),
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Center(
        child: image,
      ),
    );
  }
}

class PieData {
  final String label;
  final double value;
  final Color color;

  PieData(this.label, this.value, this.color);
}