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/setting_profile/setting_profile_cubit.dart';
import 'package:e_commerce_training/src/page/setting_profile/setting_profile_state.dart';
import 'package:e_commerce_training/src/util/util.dart';
import 'package:easy_localization/src/public_ext.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class SettingProfilePage extends StatefulWidget {
  @override
  _SettingProfilePageState createState() => _SettingProfilePageState();
}

class _SettingProfilePageState extends State<SettingProfilePage> {
  late SettingProfileCubit _cubit;

  @override
  void initState() {
    // TODO: implement initState
    AppRepository repository = AppRepository();
    _cubit = SettingProfileCubit(repository);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: R.color.grey200,
      body: SafeArea(
        child: BlocProvider(
          create: (context) => _cubit,
          child: BlocConsumer<SettingProfileCubit, SettingProfileState>(
            listener: (context, state) {
              if (state is SettingProfileFailure) Util.showErrorSnackBar(context, state.error);
              // TODO: implement listener
            },
            builder: (context, state) {
              return buildPage(context, state);
            },
          ),
        ),
      ),
    );
  }

  Widget buildPage(BuildContext context, SettingProfileState state) {
    return Column(
      children: [
        Container(
          color: R.color.white,
          padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
          child: Row(
            children: [
              _cubit.isLoggedIn
                  ? CircleAvatar(
                      radius: 30.h,
                      backgroundColor: R.color.orange,
                      backgroundImage: AssetImage(_cubit.avatar ?? ""),
                    )
                  : CircleAvatar(
                      radius: 30.h,
                      backgroundColor: R.color.orange,
                      backgroundImage: AssetImage(R.drawable.icAdmin),
                    ),
              SizedBox(width: 15),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _cubit.isLoggedIn
                        ? Text(
                            _cubit.name ?? "",
                            style: TextStyle(
                              fontSize: 22.sp,
                              color: R.color.black,
                              fontWeight: FontWeight.w600,
                            ),
                          )
                        : Text(
                            R.string.admin.tr(),
                            style: TextStyle(
                              fontSize: 22.sp,
                              color: R.color.black,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                    SizedBox(height: 5),
                    Text(
                      _cubit.name ?? "",
                      style: TextStyle(
                        fontSize: 16.sp,
                        color: R.color.black,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(width: 10),
              Container(
                padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(16),
                  color: Colors.deepOrange,
                ),
                child: Row(
                  children: [
                    Icon(
                      Icons.stars,
                      size: 30.h,
                      color: R.color.white,
                    ),
                    SizedBox(width: 5),
                    Text(
                      _cubit.point.toString() + R.string.points_profile.tr(),
                      style: TextStyle(
                        fontSize: 16.sp,
                        fontWeight: FontWeight.w600,
                        color: R.color.white,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        Expanded(
          child: GridView.count(
            crossAxisCount: 2,
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
            mainAxisSpacing: 20.0,
            crossAxisSpacing: 20.0,
            childAspectRatio: 9 / 5,
            children: <Widget>[
              buildFolder(
                title: R.string.club_page.tr(),
                iconData: Icons.groups,
                callback: () {},
              ),
              buildFolder(
                title: R.string.association.tr(),
                iconData: Icons.account_circle_outlined,
                callback: () {},
              ),
              buildFolder(
                title: R.string.imi_page.tr(),
                iconData: Icons.flag_outlined,
                callback: () {},
              ),
              buildFolder(
                title: R.string.events.tr(),
                iconData: Icons.event_available,
                callback: () {},
              ),
              buildFolder(
                title: R.string.marketplace.tr(),
                iconData: Icons.store,
                callback: () {},
              ),
              buildFolder(
                title: R.string.bookmarked.tr(),
                iconData: Icons.bookmark_border,
                callback: () {},
              ),
            ],
          ),
        )
      ],
    );
  }

  Widget buildFolder({String? title, IconData? iconData, VoidCallback? callback}) {
    return InkWell(
      onTap: callback,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
        color: R.color.white,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              iconData,
              size: 30.h,
              color: R.color.orange,
            ),
            SizedBox(height: 5),
            Text(
              title ?? "",
              style: TextStyle(
                fontSize: 20.sp,
                fontWeight: FontWeight.w600,
                color: R.color.black,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
