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/member_ship/member_ship_cubit.dart';
import 'package:e_commerce_training/src/page/member_ship/member_ship_state.dart';
import 'package:e_commerce_training/src/page/setting_profile/setting_profile_page.dart';
import 'package:e_commerce_training/src/util/navigation_util.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 MemberShipPage extends StatefulWidget {
  const MemberShipPage({Key? key}) : super(key: key);

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

class _MemberShipPageState extends State<MemberShipPage> {
  late MemberShipCubit _cubit;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: R.color.grey300,
      appBar: AppBar(
        title: Text(R.string.member_ship.tr()),
      ),
      body: BlocProvider(
        create: (context) => _cubit,
        child: BlocConsumer<MemberShipCubit, MemberShipState>(
          listener: (context, state) {
            if (state is MemberShipFailure) Util.showErrorSnackBar(context, state.error);
            // TODO: implement listener
          },
          builder: (context, state) {
            return buildPage(context, state);
          },
        ),
      ),
    );
  }

  Widget buildPage(BuildContext context, MemberShipState state) {
    return ListView(
      padding: EdgeInsets.symmetric(vertical: 10),
      children: [
        buildCard(
          icon: Icons.person_outline,
          colorBackGround: R.color.orange.withOpacity(0.4),
          colorIcon: R.color.orange,
          title: R.string.individual_member.tr(),
          callback: () {
            NavigationUtil.rootNavigatePage(context, SettingProfilePage());
          },
        ),
        buildCard(
          icon: Icons.groups,
          colorBackGround: R.color.primaryColor.withOpacity(0.4),
          colorIcon: R.color.primaryColor,
          title: R.string.create_club.tr(),
          callback: () {},
        ),
        buildCard(
          icon: Icons.group_outlined,
          colorBackGround: R.color.green.withOpacity(0.4),
          colorIcon: R.color.green,
          title: R.string.create_association.tr(),
          callback: () {},
        ),
        buildCard(
          icon: Icons.groups,
          colorBackGround: R.color.primaryColor.withOpacity(0.4),
          colorIcon: R.color.primaryColor,
          title: R.string.promotor.tr(),
          callback: () {},
        ),
        buildCard(
          icon: Icons.person_add_alt,
          colorBackGround: R.color.red.withOpacity(0.4),
          colorIcon: R.color.red,
          title: R.string.merchant.tr(),
          callback: () {},
        )
      ],
    );
  }

  Widget buildCard({IconData? icon, String? title, Color? colorBackGround, Color? colorIcon, VoidCallback? callback}) {
    return InkWell(
      onTap: callback,
      child: Container(
        margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
        child: Card(
          color: R.color.white.withOpacity(0.9),
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Container(
                      padding: EdgeInsets.all(5.0),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: colorBackGround,
                        ),
                        child: Icon(
                          icon,
                          size: 30.h,
                          color: colorIcon,
                        )),
                    SizedBox(width: 20),
                    Expanded(
                      child: Text(
                        title ?? "",
                        style: TextStyle(
                          fontSize: 20.sp,
                          color: R.color.black,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ),
                    Image.asset(
                      R.drawable.icNextNavigation,
                      height: 40.h,
                      width: 40.h,
                      color: R.color.gray,
                    )
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
