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/individual/individual_cubit.dart';
import 'package:e_commerce_training/src/page/individual/individual_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';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';

class IndividualPage extends StatefulWidget {
  @override
  _IndividualPageState createState() => _IndividualPageState();
}

class _IndividualPageState extends State<IndividualPage> {
  late IndividualCubit cubit;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Individual"),
      ),
      body: BlocProvider(
        create: (context) => cubit,
        child: BlocConsumer<IndividualCubit, IndividualState>(
          listener: (context, state) {
            if (state is IndividualFailure) Util.showErrorSnackBar(context, state.error);
            // TODO: implement listener
          },
          builder: (context, state) {
            return SafeArea(
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    buildRank(
                      color: R.color.gray,
                      image: R.drawable.icSilver,
                      title: R.string.imi_club_standard.tr(),
                      colorStar: R.color.gray,
                      content1: R.string.unlimited_access_to_dedicated_club_province_events.tr(),
                      content2: R.string.limited_access_to_other_clubs.tr(),
                      content3: R.string.unlimited_access_to_imi_networks.tr(),
                      content4: R.string.discounted_on_services.tr(),
                      content5: R.string.insurance_included.tr(),
                      price: "Rp 1000,000 / year",
                    ),
                    buildRank(
                      color: Colors.amberAccent,
                      image: R.drawable.icGolden,
                      title: R.string.imi_mobility.tr(),
                      colorStar: Colors.amberAccent,
                      content1: R.string.unlimited_access_to_dedicated_club_province_events.tr(),
                      content2: R.string.free_to_join_all.tr(),
                      content3: R.string.unlimited_access_to_imi_networks.tr(),
                      content4: R.string.discounted_on_services.tr(),
                      content5: R.string.insurance_included.tr(),
                      price: "Rp 2000,000 / year",
                    ),
                    buildRank(
                      color: Colors.cyan,
                      image: R.drawable.icDiamond,
                      title: R.string.imi_mobility.tr(),
                      colorStar: Colors.cyan,
                      content1: R.string.unlimited_access_to_dedicated_club_province_events.tr(),
                      content2: R.string.free_to_join_all.tr(),
                      content3: R.string.unlimited_access_to_imi_networks.tr(),
                      content4: R.string.discounted_on_services.tr(),
                      content5: R.string.insurance_included.tr(),
                      price: "Rp 3000,000 / year",
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  Widget buildRank({
    Color? color,
    String? title,
    String? content1,
    String? content2,
    String? content3,
    String? content4,
    String? content5,
    String? image,
    String? price,
    Color? colorStar
  }) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: R.color.grey100,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            height: 10.h,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(10),
                topLeft: Radius.circular(10),
              ),
              color: color,
            ),
          ),
          SizedBox(height: 20),
          Image.asset(
            image ?? "",
            height: 50.h,
            width: 50.h,
          ),
          SizedBox(height: 20),
          Text(
            title ?? "",
            style: TextStyle(
              fontSize: 24.h,
              fontWeight: FontWeight.w600,
              color: R.color.black,
            ),
          ),
          SizedBox(height: 20),
          buildRowText(
            title: content1,
            color: colorStar,
          ),
          SizedBox(height: 20),
          buildRowText(
            title: content2,
            color: colorStar,
          ),
          SizedBox(height: 20),
          buildRowText(
            title: content3,
            color: colorStar,
          ),
          SizedBox(height: 20),
          buildRowText(
            title: content4,
            color: colorStar,
          ),
          SizedBox(height: 20),
          buildRowText(
            title: content5,
            color: colorStar,
          ),
          SizedBox(height: 20),
          Text(
            price ?? "",
            style: TextStyle(
              fontSize: 22.h,
              fontWeight: FontWeight.w600,
              color: R.color.orange,
            ),
          ),
          SizedBox(height: 20),
          InkWell(
            onTap: () {},
            child: Container(
              height: 60.h,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  bottomRight: Radius.circular(10),
                  bottomLeft: Radius.circular(10),
                ),
                color: R.color.orange,
              ),
              child: Center(
                child: Text(
                  R.string.enroll_now.tr(),
                  style: TextStyle(
                    fontSize: 20.h,
                    fontWeight: FontWeight.w600,
                    color: R.color.white,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Padding buildRowText({String? title, Color? color}) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 20),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Icon(MdiIcons.star, size: 20.h, color: color),
          SizedBox(width: 10),
          Expanded(
            child: Text(
              title ?? "",
              style: TextStyle(
                fontSize: 16.h,
                fontWeight: FontWeight.w600,
                color: R.color.black,
              ),
              maxLines: 2,
            ),
          ),
        ],
      ),
    );
  }
}
