import 'dart:io';

import 'package:cathaypay_mobile/Register/register.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:image_picker/image_picker.dart';

import '../api/api.dart';

String imageEkycPath = "";

class RegisterPicturePage extends StatefulWidget {
  const RegisterPicturePage({Key? key}) : super(key: key);

  @override
  State<RegisterPicturePage> createState() => _RegisterPicturePageState();
}

class _RegisterPicturePageState extends State<RegisterPicturePage> {
  // Ensure that plugin services are initialized so that `availableCameras()`
// can be called before `runApp()`
  File? _imageFile;

  Future<void> _takePicture() async {
    final ImagePicker _picker = ImagePicker();
    final XFile? image = await _picker.pickImage(source: ImageSource.camera);
    setState(() {
      _imageFile = File(image!.path);
    });
    postImagePath(_imageFile!);
  }

  postImagePath(File image) {
    Api.imageUploadPath(Api.uploadImage, image).then((value) => {
          if (value != null) {imagePathJson(value)}
        });
  }

  imagePathJson(value) {
    value.forEach((v) {
      imageEkycPath = v["file_name"];
    });
  }

  @override
  void initState() {
    super.initState();
  }

  Widget build(BuildContext context) {
    return Scaffold(
        // extendBodyBehindAppBar: true,

        appBar: AppBar(
          backgroundColor: Colors.transparent,
          actions: [
            IconButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              icon: const Icon(
                Icons.clear,
                color: Colors.grey,
              ),
            ),
          ],
          elevation: 0,
          centerTitle: true,
          title: Text(
            "ยืนยันตัวตน",
            textAlign: TextAlign.center,
            style: GoogleFonts.kanit(
              color: Colors.black,
              fontSize: 20,
            ),
          ),
        ),
        body: SafeArea(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: [
              register_step(index: 4),
              Padding(
                padding: const EdgeInsets.all(20.0),
                child: Text(
                  "Take your photo with your ID card / passport".tr(),
                  textAlign: TextAlign.center,
                  style: GoogleFonts.kanit(
                    color: Color(0xff65676b),
                    fontSize: 16,
                  ),
                ),
              ),
              Container(
                width: 118,
                height: 96,
                child: Image(
                  image: AssetImage('images/register/takepicture.png'),
                  fit: BoxFit.cover,
                ),
              ),
              SizedBox(
                height: 50,
              ),
              Expanded(
                child: Container(
                  width: double.infinity,
                  margin: EdgeInsets.only(left: 20, right: 20),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Color(0xfff3f0f2),
                  ),
                  child: _imageFile != null
                      ? Image.file(
                          _imageFile!,
                        )
                      : InkWell(
                          onTap: _takePicture,
                          child: Container(
                            width: 64,
                            height: 64,
                            child: Stack(
                              children: [
                                Center(
                                  child: Container(
                                    width: 64,
                                    height: 64,
                                    decoration: BoxDecoration(
                                      shape: BoxShape.circle,
                                      color: Color(0xff9d001b),
                                    ),
                                  ),
                                ),
                                Positioned.fill(
                                  child: Align(
                                    alignment: Alignment.center,
                                    child: Container(
                                      width: 36,
                                      height: 36,
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(8),
                                      ),
                                      child: Icon(
                                        Icons.camera_alt,
                                        color: Colors.white,
                                        size: 30,
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                ),
              ),
              SizedBox(
                height: 50,
              ),
              Container(
                width: double.infinity,
                margin: EdgeInsets.only(left: 20, right: 20, bottom: 20),
                child: InkWell(
                  onTap: () {
                    _imageFile != null ? Navigator.pushNamed(context, '/RegisterSignaturePage') : Navigator.pushNamed(context, '/RegisterSignaturePage');
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(100),
                      color: Color(0xff9d001b),
                    ),
                    padding: EdgeInsets.all(10),
                    child: Text(
                      "Next".tr(),
                      textAlign: TextAlign.center,
                      style: GoogleFonts.kanit(
                        color: Colors.white,
                        fontSize: 20,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ));
  }
}