import 'dart:convert';
import 'dart:io';
import 'dart:io' as io;

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

class CobaCamera extends HookConsumerWidget {
  const CobaCamera({super.key});
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final photo = useState<XFile?>(null);
    final photoBase64 = useState<String>("");
    final previewLoading = useState(false);
    getBase64() async {
      // List<int> imageBytes = await photo.value?.readAsBytes();
      if (photo.value != null) {
        final bytes = io.File(photo.value!.path).readAsBytesSync();
        String base64Image = base64Encode(bytes);
        photoBase64.value = base64Image;
        final file = File(photo.value!.path);
        print(file.lengthSync() / 1000000);
        print(await photo.value!.length());

        // await getExternalStorageDirectory();
        // print(await photo.value!.saveTo(path));
        print(base64Image);
      }
    }

    final ImagePicker _picker = ImagePicker();
    pickImage() async {
      previewLoading.value = true;
      final XFile? pickedFile = await _picker.pickImage(
        source: ImageSource.camera,
      );
      photo.value = pickedFile;
      // final Directory appDocumentsDir =
      //     await getApplicationDocumentsDirectory();
      // print(appDocumentsDir);
      // await pickedFile!.saveTo(appDocumentsDir.path);
      await getBase64();
      previewLoading.value = false;
    }

    browseImage() async {
      previewLoading.value = true;

      final XFile? pickedFile = await _picker.pickImage(
        source: ImageSource.gallery,
      );
      photo.value = pickedFile;
      getBase64();
      previewLoading.value = false;
    }

    return Scaffold(
      body: SingleChildScrollView(
        child: SafeArea(
          minimum: const EdgeInsets.all(20),
          child: Column(
            children: [
              Container(
                height: Constant.getActualYPhone(context: context, y: 500),
                width: MediaQuery.of(context).size.width,
                color: Colors.red,
                child: LayoutBuilder(
                  builder: (context, constraints) {
                    final String? mime =
                        lookupMimeType(photo.value?.path ?? "");

                    return Semantics(
                        label: 'image_picker_example_picked_image',
                        child: (mime != null
                            ? (mime.startsWith('image/'))
                                ? Image.file(
                                    // image: AssetImage(photo.value!.path),
                                    File(photo.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'));
                                    },
                                  )
                                : null
                            : null));
                  },
                ),
              ),
              // photo.value != null
              //     ? PhotoView(imageProvider: AssetImage(photo.value!.path))
              //     : Container(),
              Row(
                children: [
                  ElevatedButton(
                      onPressed: () {
                        pickImage();
                      },
                      child: Text("Take a picture")),
                  ElevatedButton(
                      onPressed: () {
                        browseImage();
                      },
                      child: Text("Browse a picture"))
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
