import 'dart:io';

import '../../app/constant.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:mime/mime.dart';

class PresensiSelfieUploadAreaWidget extends StatelessWidget {
  const PresensiSelfieUploadAreaWidget({
    super.key,
    required this.isImage,
    required this.fileData,
    required this.fileDataBase64,
    required this.pickFile,
    required this.pickImage,
    required this.isLoading,
  });

  final ValueNotifier<bool> isImage;
  final ValueNotifier<bool> isLoading;
  final ValueNotifier<XFile?> fileData;
  final ValueNotifier<String> fileDataBase64;
  final Function pickImage;
  final Function pickFile;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: !isLoading.value
          ? () {
              showModalBottomSheet(
                context: context,
                builder: (context) {
                  return Container(
                    height: Constant.getActualYPhone(context: context, y: 200),
                    padding: EdgeInsets.all(20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        // Column(
                        //   children: [
                        // IconButton(
                        //     onPressed: () {
                        //       Navigator.pop(context);
                        //       pickFile();
                        //     },
                        //     icon: Icon(
                        //       Icons.folder_copy_rounded,
                        //       size: 50,
                        //       color: Constant.textOrange,
                        //     )),
                        // Text(
                        //   "Browse a file",
                        //   style: Constant.titleH2_400_12(context: context)
                        //       .copyWith(
                        //     fontWeight: FontWeight.w600,
                        //     color: Constant.textBlack,
                        //   ),
                        // )
                        //   ],
                        // ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            IconButton(
                              onPressed: () {
                                Navigator.pop(context);
                                pickImage();
                              },
                              icon: Icon(
                                Icons.add_a_photo_rounded,
                                size: 50,
                                color: Constant.textOrange,
                              ),
                            ),
                            SizedBox(
                              height: Constant.getActualYPhone(
                                  context: context, y: 10),
                            ),
                            Text(
                              "Take a picture",
                              style: Constant.titleH2_400_12(context: context)
                                  .copyWith(
                                fontWeight: FontWeight.w600,
                                color: Constant.textBlack,
                              ),
                            )
                          ],
                        ),
                      ],
                    ),
                  );
                },
              );
            }
          : null,
      child: Stack(
        alignment: AlignmentDirectional.topEnd,
        children: [
          Container(
            width: Constant.getActualXPhone(context: context, x: 390),
            height: Constant.getActualYPhone(
                context: context, y: isImage.value ? 200 : 83),
            decoration: BoxDecoration(
              color: Constant.bgUploadFile,
              borderRadius: BorderRadius.circular(8),
            ),
            child: Builder(builder: (context) {
              final String? mime = lookupMimeType(fileData.value?.path ?? "");
              return Semantics(
                  label: 'image_picker_example_picked_image',
                  child: (mime != null
                      ? (mime.startsWith('image/'))
                          ? Image.file(
                              // image: AssetImage(photo.value!.path),
                              File(fileData.value!.path),
                              frameBuilder: (context, child, frame,
                                  wasSynchronouslyLoaded) {
                                return (wasSynchronouslyLoaded)
                                    ? Center(
                                        child: Text("Loadinga"),
                                      )
                                    : Container(
                                        child: child,
                                      );
                              },
                              errorBuilder: (BuildContext context, Object error,
                                  StackTrace? stackTrace) {
                                return const Center(
                                    child: Text(
                                        'This image type is not supported'));
                              },
                            )
                          : Container(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Icon(
                                    Icons.file_present_rounded,
                                    size: 40,
                                    color: Constant.textOrange,
                                  ),
                                  Text(
                                    fileData.value?.name ?? '',
                                    style:
                                        Constant.titleH2_400(context: context),
                                  )
                                ],
                              ),
                            )
                      : Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            // Icon(
                            //   Icons.upload_outlined,
                            //   color: Constant.textOrange,
                            // ),

                            Image.asset(
                              'images/camera_selfie.png', // Path gambar untuk "Check In"
                              width: Constant.getActualXPhone(
                                  context: context, x: 24),
                              height: Constant.getActualYPhone(
                                  context: context, y: 24),
                            ),
                            SizedBox(
                              height: Constant.getActualYPhone(
                                context: context,
                                y: 4,
                              ),
                            ),
                            Text(
                              'Upload File',
                              style: Constant.titleH2_400_12(context: context)
                                  .copyWith(
                                      fontWeight: FontWeight.w600,
                                      color: Constant.textOrange),
                            )
                          ],
                        )));
            }),
          ),
          if (fileData.value != null && !isLoading.value)
            IconButton(
                onPressed: () {
                  fileData.value = null;
                  fileDataBase64.value = '';
                  isImage.value = false;
                },
                icon: Icon(Icons.cancel_outlined)),
        ],
      ),
    );
  }
}
