import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:medcify/components/button.dart';
import 'package:medcify/constants.dart';
import 'package:medcify/models/plan_item.dart';
import 'package:medcify/pages/main/plan/plan_bloc.dart';

import '../../../components/loader.dart';
import '../../../navigation/navigation.dart';

class PlanPage extends StatelessWidget {
  bool isBack;
  PlanPage(this.isBack);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0.25,
        automaticallyImplyLeading: false,
        title: const Text("Plan",style: TextStyle(color: Colors.black,fontSize: 17),),
        leading: (isBack) ? IconButton(
          onPressed: (){
            Navigation.instance.goBack();
          },
          icon: const Icon(Icons.keyboard_backspace_rounded,color: Colors.black,),
        ) : null,
      ),
      body: BlocProvider<PlanCubit>(
        create: (context) => PlanCubit(),
        child: PlanWidget(),
      ),
    );
  }
}

class PlanWidget extends StatefulWidget {
  @override
  State<PlanWidget> createState() => _PlanWidgetState();
}

class _PlanWidgetState extends State<PlanWidget> {
  late PlanCubit planCubit;

  @override
  initState(){
    planCubit = BlocProvider.of<PlanCubit>(context);
    planCubit.listenRazorPayEvents();
    planCubit.fetchPlan();
    super.initState();
  }

  @override
  dispose(){
    planCubit.razorpay.clear();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<PlanCubit, PlanState>(
      builder: (context, state){
        if(state is PlanLoading){
          return const Loader();
        }else if(state is PlanFailure){
          return Container(
            alignment: Alignment.center,
            margin: const EdgeInsets.symmetric(horizontal: 24),
            child: Text(state.error,style: TextStyle(color: Colors.grey.shade800, fontSize: 13, height: 1.6),),
          );
        }else{
          return SingleChildScrollView(
            physics: const BouncingScrollPhysics(),
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(height: 20,),
                Visibility(
                  visible: planCubit.isCurrentPlan,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text("Current Plan",style: TextStyle(fontWeight: FontWeight.w600,fontSize: 16,color: Colors.black),),
                      const SizedBox(height: 16,),
                      Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(4),
                              color: Colors.red
                          ),
                          width: double.infinity,
                          padding: const EdgeInsets.symmetric(horizontal: 20,vertical: 24),
                          child: Row(
                            children: [
                              Expanded(
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    const Text("Plan Name",style: TextStyle(fontWeight: FontWeight.w600,fontSize: 15,color: Colors.white),),
                                    const SizedBox(height: 8,),
                                    Text(planCubit.currentPlan,style: const TextStyle(fontSize: 14,color: Colors.white),),
                                    const SizedBox(height: 20,),
                                    const Text("Plan Expiry Date",style: TextStyle(fontWeight: FontWeight.w600,fontSize: 15,color: Colors.white),),
                                    const SizedBox(height: 8,),
                                    Text(planCubit.expiryDate,style: const TextStyle(fontSize: 14,color: Colors.white),),
                                  ],
                                ),
                              ),
                              Image.asset("assets/images/plan_task.png",height: 80,width: 80,)
                            ],
                          )
                      ),
                      const SizedBox(height: 20,),
                    ],
                  ),
                ),
                const Text("Plans",style: TextStyle(fontWeight: FontWeight.w600,fontSize: 16,color: Colors.black),),
                const SizedBox(height: 16,),
                ListView.builder(
                  itemCount: planCubit.plans.length,
                  padding: EdgeInsets.zero,
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemBuilder: (context, pos){
                    PlanItem plan = planCubit.plans[pos];
                    return Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(4),
                            color: Constants.primaryColor
                        ),
                        width: double.infinity,
                        padding: const EdgeInsets.symmetric(horizontal: 20,vertical: 24),
                        margin: const EdgeInsets.only(bottom: 20),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Expanded(
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      const Text("Plan Name",style: TextStyle(fontWeight: FontWeight.w600,fontSize: 15,color: Colors.white),),
                                      const SizedBox(height: 8,),
                                      Text(plan.name ?? "",style: const TextStyle(fontSize: 14,color: Colors.white),),
                                      const SizedBox(height: 20,),
                                      const Text("Plan Validity",style: TextStyle(fontWeight: FontWeight.w600,fontSize: 15,color: Colors.white),),
                                      const SizedBox(height: 8,),
                                      Text("${plan.validity} days",style: const TextStyle(fontSize: 14,color: Colors.white),),
                                    ],
                                  ),
                                ),
                                const SizedBox(width: 8,),
                                Row(
                                  children: [
                                    const Text("\u{20B9} ",style: TextStyle(fontSize: 12,color: Colors.white, fontWeight: FontWeight.w600),),
                                    Text("${plan.amount ?? 0}",style: const TextStyle(fontSize: 22,color: Colors.white, fontWeight: FontWeight.w600),),
                                  ],
                                ),
                              ],
                            ),
                            const SizedBox(height: 30,),
                            Button(
                                text: "Subscribe",
                                onPressed: (){
                                  planCubit.fetchOrderId(plan);
                                },
                                color: Colors.white,
                                textColor: Constants.primaryColor,
                            )
                          ],
                        ),
                    );
                  },
                )
              ],
            ),
          );
        }
      }
    );
  }
}