import 'dart:io';
import 'dart:ui';

import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:mohem_flutter_app/api/profile_api_client.dart';
import 'package:mohem_flutter_app/app_state/app_state.dart';
import 'package:mohem_flutter_app/classes/utils.dart';
import 'package:mohem_flutter_app/extensions/int_extensions.dart';
import 'package:mohem_flutter_app/extensions/string_extensions.dart';
import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
import 'package:mohem_flutter_app/models/get_employee_basic_details.model.dart';
import 'package:mohem_flutter_app/models/member_information_list_model.dart';
import 'package:mohem_flutter_app/ui/profile/widgets/profile_panel.dart';
import 'package:mohem_flutter_app/widgets/bottom_sheet.dart';
import 'package:mohem_flutter_app/widgets/image_picker.dart';

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

  @override
  _ProfileScreenState createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  late MemberInformationListModel memberInformationList;
  final ImagePicker _picker = ImagePicker();
  List<GetEmployeeBasicDetailsList> getEmployeeBasicDetailsList = [];
  List<String> images = [];

  @override
  void initState() {
    super.initState();
    memberInformationList = AppState().memberInformationList!;
    setState(() {});
    //getEmployeeBasicDetails();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      backgroundColor: const Color(0xffefefef),
      body: Stack(
        children: [
          memberInformationList!.eMPLOYEEIMAGE != null
              ? Container(
                  height: 300,
                  margin: const EdgeInsets.only(top: 50),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                        image: MemoryImage(
                          Utils.dataFromBase64String(memberInformationList.eMPLOYEEIMAGE!),
                        ),
                        fit: BoxFit.cover),
                  ),
                  child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                    child: Container(
                      color: Colors.white.withOpacity(0.0),
                    ),
                  ),
                )
              : Container(
                  decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
                ),
          SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    CircleAvatar(
                      radius: 18,
                      backgroundColor: Colors.black.withOpacity(.21),
                      child: const Icon(Icons.arrow_back_ios_rounded, color: Colors.white, size: 18).paddingOnly(right: 4),
                    ).onPress(() {
                      Navigator.pop(context);
                    }),
                    InkWell(
                      onTap: () {
                        // startImageSheet();
                        ImageOptions.showImageOptionsNew(context, false, (String image, File file) {
                          setState(() {
                            // images.add(image);
                            Navigator.of(context).pop();
                            openGallery(image);
                          });
                        });
                      },
                      child: Container(
                        padding: const EdgeInsets.only(left: 17, right: 17, top: 8, bottom: 8),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(30),
                          color: Colors.black.withOpacity(.21),
                        ),
                        child: Row(
                          children: [
                            const Icon(Icons.photo, color: Colors.white, size: 16),
                            4.width,
                            LocaleKeys.edit.tr().toText12(color: Colors.white),
                          ],
                        ),
                      ),
                    ),
                  ],
                ).paddingOnly(left: 16, right: 16, top: 80),
                ProfilePanel(memberInformationList)
              ],
            ),
          )
        ],
      ),
    );
  }

  void startImageSheet() {
    showMyBottomSheet(context,
        callBackFunc: () {},
        child: Column(
          children: [
            Container(
                padding: EdgeInsets.only(left: 20, right: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [Text(LocaleKeys.ok.tr()), Text(LocaleKeys.cancel.tr())],
                )),
            BottomSheetItem(
              onTap: () {
                // openGallery(false);
              },
              title: 'Open Gallery',
              icon: Icons.browse_gallery_outlined,
            ),
            BottomSheetItem(
              onTap: () {
                // openGallery(true);
              },
              title: 'Open Camera',
              icon: Icons.camera,
            )
          ],
        ));
  }

  void openGallery(String image) async {
    // XFile? image = await _picker.pickImage(source: isCamera ? ImageSource.camera : ImageSource.gallery);

    // String img = base64.encode(await image!.readAsBytes());
    Utils.showLoading(context);
    dynamic empImageUpdteResp = await ProfileApiClient().updateEmpImage(image);
    Utils.hideLoading(context);
    if (empImageUpdteResp['P_RETURN_STATUS'] == 'S') {
      setState(() {
        memberInformationList.eMPLOYEEIMAGE = image;
      });
    }
  }
}