import 'dart:io';

import 'package:e_commerce_training/res/R.dart';
import 'package:e_commerce_training/src/model/repository/app_repository.dart';
import 'package:e_commerce_training/src/page/profile_avatar/profile_avatar_cubit.dart';
import 'package:e_commerce_training/src/page/profile_avatar/profile_avatar_state.dart';
import 'package:e_commerce_training/src/util/navigation_util.dart';
import 'package:e_commerce_training/src/util/util.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:image_picker/image_picker.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:easy_localization/easy_localization.dart';

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

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

class _ProfileAvatarPageState extends State<ProfileAvatarPage> {
  File? _image;
  var imagePicker;
  late ProfileAvatarCubit cubit;

  @override
  void initState() {
    // TODO: implement initState
    AppRepository repository = AppRepository();
    cubit = ProfileAvatarCubit(repository);
    imagePicker = ImagePicker();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BlocProvider(
        create: (context) => cubit,
        child: BlocConsumer<ProfileAvatarCubit, ProfileAvatarState>(
          listener: (context, state) {
            // TODO: implement listener
            if (state is ProfileAvatarFailure) Util.showErrorSnackBar(context, state.error);
          },
          builder: (context, state) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Center(
                  child: Text(
                    R.string.create_your_profile.tr(),
                    style: TextStyle(
                      fontSize: 22.sp,
                      fontWeight: FontWeight.w600,
                      color: R.color.black,
                    ),
                  ),
                ),
                SizedBox(height: 10),
                Container(
                  width: 200.w,
                  child: Text(
                    R.string.choose_or_take.tr(),
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w500,
                      color: R.color.gray,
                    ),
                    textAlign: TextAlign.center,
                    maxLines: 2,
                  ),
                ),
                SizedBox(height: 60),
                Stack(
                  children: [
                    CircleAvatar(
                      radius: 100.h,
                      backgroundColor: R.color.orange,
                      backgroundImage: AssetImage(R.drawable.admin),
                    ),
                    Positioned(
                      right: -40,
                      bottom: -40,
                      child: Container(
                        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
                        alignment: Alignment.centerLeft,
                        child: GestureDetector(
                          onTap: () async {
                            showModalBottomSheet(
                              context: context,
                              isScrollControlled: true,
                              backgroundColor: Colors.transparent,
                              builder: (context) =>
                                  Container(
                                    height: 250.h,
                                    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.only(
                                        topLeft: Radius.circular(20),
                                        topRight: Radius.circular(20),
                                      ),
                                      color: R.color.white,
                                    ),
                                    child: Column(
                                      children: [
                                        Row(
                                          children: [
                                            Expanded(
                                              child: Center(
                                                child: Text(
                                                  R.string.profile_picture.tr(),
                                                  style: TextStyle(
                                                    fontSize: 20.sp,
                                                    fontWeight: FontWeight.w600,
                                                    color: R.color.black,
                                                  ),
                                                ),
                                              ),
                                            ),
                                            InkWell(
                                              onTap:()=>NavigationUtil.pop(context),
                                              child: Icon(
                                                MdiIcons.close,
                                                color: Colors.deepOrangeAccent,
                                              ),
                                            )
                                          ],
                                        ),
                                        SizedBox(height: 30),
                                        InkWell(
                                          onTap: () async {
                                            XFile image = await imagePicker.pickImage(
                                              source: ImageSource.camera,
                                            );
                                            _image = File(image.path);
                                          },
                                          child: buildButton(
                                            title: R.string.take_a_photo.tr(),
                                            icon: MdiIcons.camera,
                                          ),
                                        ),
                                        SizedBox(height: 30),
                                        InkWell(
                                          onTap: () async {
                                            XFile image = await imagePicker.pickImage(
                                              source: ImageSource.gallery,
                                            );
                                            _image = File(image.path);
                                          },
                                          child: buildButton(
                                            title: R.string.choose_a_photo.tr(),
                                            icon: MdiIcons.image,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                            );
                          },
                          child: Container(
                            width: 120.w,
                            height: 120.w,
                            child: _image != null
                                ? Image.file(
                              _image!,
                              width: 120.w,
                              height: 120.w,
                              fit: BoxFit.fitHeight,
                            )
                                : Icon(
                              Icons.camera_alt,
                              color: R.color.white,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 60),
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 80),
                  padding: EdgeInsets.symmetric(vertical: 15),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(25),
                    color: Colors.deepOrangeAccent,
                  ),
                  child: Center(
                    child: Text(
                      R.string.next_profile_avatar.tr(),
                      style: TextStyle(
                        fontSize: 18.sp,
                        fontWeight: FontWeight.w500,
                        color: R.color.white,
                      ),
                      textAlign: TextAlign.center,
                      maxLines: 2,
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }

  Container buildButton({String? title, IconData? icon}) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 15),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25),
        color: Colors.deepOrangeAccent,
      ),
      child: Center(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              icon,
              color: R.color.white,
            ),
            SizedBox(width: 10),
            Text(
              title ?? "",
              style: TextStyle(
                fontSize: 18.sp,
                fontWeight: FontWeight.w500,
                color: R.color.white,
              ),
              textAlign: TextAlign.center,
              maxLines: 2,
            ),
          ],
        ),
      ),
    );
  }
}
