import 'dart:typed_data';

import 'package:flip_card/flip_card.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:wallpaperx/common/components/navigation_bar/custom_appbar.dart';
import 'package:wallpaperx/common/components/pin_code_verification_screen.dart';
import 'package:wallpaperx/common/components/view_state_widget.dart';
import 'package:wallpaperx/entity/image_model.dart';
import 'package:wallpaperx/generated/assets.dart';

import 'custom_controller.dart';

class CustomView extends GetView<CustomController> {
  const CustomView({super.key});

  @override
  Widget build(BuildContext context) {
    Get.put(CustomController());
    return Scaffold(
      backgroundColor: Colors.black,
      body: FlipCard(
        flipOnTouch: false,
        controller: controller.flipCardController,
        fill: Fill.fillBack,
        side: CardSide.FRONT,
        direction: FlipDirection.HORIZONTAL,
        front: PinCodeVerificationScreen(
          callback: controller.flipCard,
          checkPassword: controller.password,
        ),
        back: _buildCustomWidget(context),
      ),
    );
  }

  Widget _buildCustomWidget(context) {
    return Stack(
      children: [
        Container(
          width: double.infinity,
          height: double.infinity,
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage(Assets.imagesSettingBackground),
              fit: BoxFit.cover,
            ),
          ),
          child: Column(
            children: [
              CustomAppbar(
                "Custom",
                backgroundColor: Colors.transparent,
                backWidget: Container(width: 32.w),
                titleStyle: TextStyle(
                  color: Colors.white,
                  fontSize: 24.sp,
                  fontWeight: FontWeight.w600,
                ),
              ),
              Expanded(child: GetBuilder<CustomController>(
                builder: (logic) {
                  return ViewStateWidget(
                    viewState: controller.viewState,
                    child: MediaQuery.removePadding(
                      context: context,
                      removeTop: true,
                      child: Scrollbar(
                        controller: controller.scrollController,
                        child: MasonryGridView.count(
                          controller: controller.scrollController,
                          itemCount: controller.customList.length,
                          crossAxisCount: 2,
                          mainAxisSpacing: 15.w,
                          crossAxisSpacing: 15.w,
                          padding: const EdgeInsets.fromLTRB(15, 20, 15, 0).w,
                          physics: const BouncingScrollPhysics(),
                          itemBuilder: (context, index) {
                            ImageModel item = controller.customList[index];
                            Uint8List? image =
                                controller.readImage(item.imageUrl ?? "");
                            if (image == null) return Container();
                            return GestureDetector(
                              onTap: () {
                                Get.to(
                                  () => Scaffold(
                                    backgroundColor: Colors.black,
                                    appBar: const CustomAppbar(''),
                                    body: Container(
                                      alignment: Alignment.center,
                                      child: Image.memory(image),
                                    ),
                                  ),
                                );
                              },
                              child: Container(
                                clipBehavior: Clip.hardEdge,
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(13.r),
                                ),
                                child: Image.memory(image),
                              ),
                            );
                          },
                        ),
                      ),
                    ),
                  );
                },
              ))
            ],
          ),
        ),
        Positioned(
          right: 10.w,
          bottom: MediaQuery.of(context).padding.bottom + 80.w,
          child: FloatingActionButton(
            backgroundColor: Colors.grey,
            onPressed: controller.toPhotos,
            child: const Icon(Icons.add),
          ),
        )
      ],
    );
  }
}