import 'dart:io';

import 'package:clean/base/base_page.dart';
import 'package:clean/module/locations_photo/locations_photo_controller.dart';
import 'package:clean/resource/assets.gen.dart';
import 'package:clean/router/app_pages.dart';
import 'package:clean/utils/styles.dart';
import 'package:flutter/Material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';

class LocationsPhotoPage extends BasePage<LocationsPhotoController> {
  @override
  bool statusBarDarkFont() => false;

  @override
  bool immersive() => true;

  static void start() {
    Get.toNamed(RoutePath.locationsPhoto);
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(children: [
      Container(
        child: SafeArea(
          child: Obx(() {
            if (controller.photoGroups.isEmpty) {
              return _noNoPicturesCard();
            } else {
              return photoDateCard();
            }
          }),
        ),
      ),
      IgnorePointer(
        child: Assets.images.bgHome.image(
          width: 360.w,
        ),
      ),
    ]);
  }

  Widget photoDateCard() {
    return Column(
      children: [
        _titleCard(),
        Expanded(
          child: Obx(() {
            return ListView(
              padding: EdgeInsets.symmetric(horizontal: 16.w),
              children: [
                ...controller.photoGroups.map((group) => Column(
                      children: [
                        _buildPhotoGroup(
                          title: "photo: ${group.images.length}",
                          location: group.location ?? '',
                          imageCount: group.images.length,
                        ),
                        SizedBox(height: 15.h),
                      ],
                    ))
              ],
            );
          }),
        ),
      ],
    );
  }

  Widget _titleCard() {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(left: 16.w, top: 14.h),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          GestureDetector(
            onTap: () => Get.back(),
            child: Assets.images.iconBackArrow.image(
              width: 28.w,
              height: 28.h,
            ),
          ),
          (controller.photoGroups.isEmpty)
              ? const SizedBox()
              : Column(
                  children: [
                    SizedBox(height: 12.h),
                    Text(
                      'Places Photos',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24.sp,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                    SizedBox(height: 20.h),
                  ],
                )
        ],
      ),
    );
  }

  Widget _buildPhotoGroup({
    required String location,
    required String title,
    required int imageCount,
  }) {
    return Container(
      margin: EdgeInsets.only(top: 14.h),
      width: 328.w,
      height: 227.h,
      decoration: ShapeDecoration(
        color: Colors.white.withValues(alpha: 0.12),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(14.sp),
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SizedBox(width: 16.w),
              Text(
                title,
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ],
          ),
          SizedBox(
            child: GestureDetector(
              onTap: () => controller
                  .clickPhotoGroup(controller.getGroupByLocation(location)),
              child: Obx(() {
                final group = controller.getGroupByLocation(location);
                final imagePath =
                    group.images.isNotEmpty ? group.images.first : null;
                return imagePath != null
                    ? Stack(
                        children: [
                          Container(
                            width: 304.w,
                            height: 171.h,
                            decoration: ShapeDecoration(
                              color: Colors.white.withValues(alpha: 0.12),
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(8.r),
                              ),
                            ),
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(8.r),
                              child: AssetEntityImage(
                                imagePath,
                                width: 304.w,
                                thumbnailSize: const ThumbnailSize.square(300),
                                height: 171.h,
                                frameBuilder: Styles.customFrameBuilder(width: 140.w,
                                    height: 140.h),
                                fit: BoxFit.cover,
                                isOriginal: false,
                              ),
                            ),
                          ),
                          Positioned(
                              left: 1.w,
                              right: 1.w,
                              bottom: 16.sp,
                              child: Text(
                                location,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 20.sp,
                                  fontWeight: FontWeight.w500,
                                ),
                              ))
                        ],
                      )
                    : Container();
              }),
            ),
          ),
        ],
      ),
    );
  }

  Widget _noNoPicturesCard() {
    return Column(
      // mainAxisAlignment: MainAxisAlignment.start,
      children: [
        _titleCard(),
        SizedBox(
          height: 170.h,
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              width: 70.w,
              height: 70.h,
              clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(),
              child: Assets.images.iconNoPictures.image(),
            ),
            SizedBox(height: 22.h),
            Text(
              'No pictures found',
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 20.sp,
                fontWeight: FontWeight.w700,
              ),
            ),
            SizedBox(height: 12.h),
            Text(
              'No pictures available at the moment',
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white.withValues(alpha: 0.6),
                fontSize: 14.sp,
                fontWeight: FontWeight.w400,
              ),
            ),
          ],
        ),
      ],
    );
  }
}