import 'package:cached_network_image/cached_network_image.dart';
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_settings/profile_settings_cubit.dart';
import 'package:e_commerce_training/src/page/profile_settings/profile_settings_state.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

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

class _ProfileSettingsPageState extends State<ProfileSettingsPage> {
  TextEditingController controller = TextEditingController();
  late ProfileSettingsCubit cubit;

  @override
  void initState() {
    // TODO: implement initState
    AppRepository repository = AppRepository();
    cubit = ProfileSettingsCubit(repository);
    cubit.addProduct();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: R.color.grey100,
      body: SafeArea(
        child: BlocProvider(
          create: (BuildContext context) => cubit,
          child: BlocBuilder<ProfileSettingsCubit, ProfileSettingsState>(
            builder: (context, state) {
              return Column(
                children: [
                  Stack(
                    alignment: Alignment.center,
                    children: [
                      Positioned(
                        left: 10,
                        child: InkWell(
                          onTap: () => Navigator.pop(context),
                          child: Row(
                            children: [
                              Image.asset(
                                R.drawable.ic_back,
                                height: 60.h,
                              ),
                              SizedBox(width: 10),
                              Text(
                                "Back",
                                style: TextStyle(
                                  fontSize: 16.sp,
                                  fontWeight: FontWeight.w400,
                                  color: R.color.primaryColor,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      Container(
                        width: double.infinity,
                        alignment: Alignment.center,
                        child: Text(
                          "Edit Profile",
                          style: TextStyle(
                            fontSize: 16.sp,
                            fontWeight: FontWeight.w600,
                            color: R.color.black,
                          ),
                        ),
                      ),
                      Positioned(
                        right: 15,
                        child: Text(
                          "Done",
                          style: TextStyle(
                            fontSize: 16.sp,
                            fontWeight: FontWeight.w600,
                            color: R.color.primaryColor,
                          ),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 10),
                  ListView.builder(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    itemCount: cubit.listProfile.length,
                    itemBuilder: (BuildContext context, int index) {
                      return Column(
                        children: [
                          Container(
                            padding: EdgeInsets.only(left: 10, top: 10, bottom: 10),
                            color: R.color.white,
                            child: Row(
                              children: [
                                InkWell(
                                  onTap: () {
                                    showCupertinoModalPopup<void>(
                                      context: context,
                                      builder: (BuildContext context) => CupertinoActionSheet(
                                        actions: <CupertinoActionSheetAction>[
                                          CupertinoActionSheetAction(
                                            onPressed: () {
                                              if (cubit.listProfile[index].image![0] != null) {
                                                cubit.pickAvatar(true);
                                                Navigator.pop(context);
                                              }
                                            },
                                            child: Container(
                                              height: 300.h,
                                              child: ListView.builder(
                                                shrinkWrap: true,
                                                scrollDirection: Axis.horizontal,
                                                itemCount: cubit.listProfile[index].image!.length,
                                                itemBuilder: (BuildContext context, int index1) {
                                                  return Container(
                                                    padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                                                    child: ClipRRect(
                                                      borderRadius: BorderRadius.circular(8),
                                                      child: CachedNetworkImage(
                                                        imageUrl: "${cubit.listProfile[index].image![index1].thumb}",
                                                        height: 300.h,
                                                        width: 220.w,
                                                        fit: BoxFit.cover,
                                                      ),
                                                    ),
                                                  );
                                                },
                                              ),
                                            ),
                                          ),
                                          CupertinoActionSheetAction(
                                            child: Text(
                                              "Choose Photo",
                                              style: TextStyle(color: R.color.primaryColor),
                                            ),
                                            onPressed: () {
                                              cubit.pickAvatar(false);
                                              Navigator.pop(context);
                                            },
                                          ),
                                          CupertinoActionSheetAction(
                                            child: Text("Remove Photo"),
                                            onPressed: () {
                                              Navigator.pop(context);
                                            },
                                          ),
                                        ],
                                        cancelButton: CupertinoActionSheetAction(
                                          isDefaultAction: true,
                                          child: Text(
                                            'Cancel',
                                            style: TextStyle(color: R.color.primaryColor),
                                          ),
                                          onPressed: () {
                                            Navigator.pop(context);
                                          },
                                        ),
                                      ),
                                    );
                                  },
                                  child: Stack(
                                    children: [
                                      CircleAvatar(
                                        radius: 110.h,
                                        backgroundImage:
                                            CachedNetworkImageProvider("${cubit.listProfile[index].avatar}"),
                                      ),
                                      CircleAvatar(
                                        radius: 110.h,
                                        backgroundColor: R.color.white.withOpacity(0.6),
                                        backgroundImage: AssetImage(R.drawable.camera),
                                      ),
                                    ],
                                  ),
                                ),
                                SizedBox(width: 10),
                                Expanded(
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Padding(
                                        padding: EdgeInsets.only(left: 5),
                                        child: Text(
                                          "${cubit.listProfile[index].nameUser}",
                                          style: TextStyle(
                                            fontSize: 16.sp,
                                            fontWeight: FontWeight.w600,
                                            color: R.color.black,
                                          ),
                                        ),
                                      ),
                                      SizedBox(height: 5),
                                      Container(
                                        height: 1,
                                        width: double.infinity,
                                        color: R.color.grey,
                                      ),
                                      SizedBox(height: 5),
                                      Padding(
                                        padding: EdgeInsets.only(left: 5),
                                        child: Text(
                                          "Last Name",
                                          style: TextStyle(
                                            fontSize: 16.sp,
                                            fontWeight: FontWeight.w600,
                                            color: R.color.grey500,
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                          SizedBox(height: 20),
                          Container(
                            width: double.infinity,
                            color: R.color.white,
                            padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                            child: Text(
                              "Bio",
                              style: TextStyle(
                                fontSize: 16.sp,
                                fontWeight: FontWeight.w600,
                                color: R.color.grey,
                              ),
                            ),
                          ),
                        ],
                      );
                    },
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}
