import 'package:app_popup_menu/app_popup_menu.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:fluttericon/font_awesome_icons.dart';
import 'package:unit2/bloc/profile/profile_bloc.dart';
import 'package:unit2/bloc/user/user_bloc.dart';
import 'package:unit2/model/profile/eligibility.dart';
import 'package:unit2/screens/profile/components/eligibility/edit_modal.dart';
import 'package:unit2/theme-data.dart/box_shadow.dart';
import 'package:unit2/theme-data.dart/colors.dart';
import 'package:unit2/utils/global.dart';
import 'package:unit2/utils/text_container.dart';
import 'package:unit2/widgets/add_leading.dart';
import 'package:unit2/widgets/empty_data.dart';

import '../../../utils/alerts.dart';

class EligibiltyScreen extends StatelessWidget {
  const EligibiltyScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text(elibilityScreenTitle),
          centerTitle: true,
          backgroundColor: primary,
          actions: [AddLeading(onPressed: () {})],
        ),
        body: BlocBuilder<UserBloc, UserState>(
          builder: (context, state) {
            if (state is UserLoggedIn) {
              return BlocBuilder<ProfileBloc, ProfileState>(
                builder: (context, state) {
                  if (state is EligibilityLoaded) {
                    return ListView.builder(
                        padding: const EdgeInsets.symmetric(
                            vertical: 8, horizontal: 10),
                        itemCount: state.eligibilities.length,
                        itemBuilder: (BuildContext context, int index) {
                          String title =
                              state.eligibilities[index].eligibility!.title!;
                          return Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Container(
                                width: screenWidth,
                                padding: const EdgeInsets.symmetric(
                                    horizontal: 12, vertical: 8),
                                decoration: box1(),
                                child: Row(
                                  children: [
                                    Expanded(
                                      child: Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              title,
                                              style: Theme.of(context)
                                                  .textTheme
                                                  .titleMedium!
                                                  .copyWith(
                                                      fontWeight:
                                                          FontWeight.w500),
                                            ),
                                            const Divider(),
                                            const SizedBox(
                                              height: 5,
                                            ),
                                            Text(
                                                "$licenseNumber: ${state.eligibilities[index].licenseNumber == null ? 'N/A' : state.eligibilities[index].licenseNumber.toString()}",
                                                style: Theme.of(context)
                                                    .textTheme
                                                    .titleSmall),
                                            const SizedBox(
                                              height: 3,
                                            ),
                                            Text(
                                                " : ${state.eligibilities[index].rating}.",
                                                style: Theme.of(context)
                                                    .textTheme
                                                    .titleSmall)
                                          ]),
                                    ),
                                    AppPopupMenu<int>(
                                      offset: const Offset(-10, -10),
                                      elevation: 3,
                                      onSelected: (value) {
                                        if (value == 2) {
                                          confirmAlert(context, () => null,
                                              "Delete?", "Confirm Delete?");
                                        }
                                        if (value == 1) {
                                          context.read<ProfileBloc>().add(
                                              EditEligibility(
                                                  eligibityCert: state
                                                      .eligibilities[index]));
                                        }
                                      },
                                      menuItems: [
                                        popMenuItem(
                                            text: "Edit",
                                            value: 1,
                                            icon: Icons.edit),
                                        popMenuItem(
                                            text: "Delete",
                                            value: 2,
                                            icon: Icons.delete),
                                        popMenuItem(
                                            text: "Attachment",
                                            value: 3,
                                            icon: FontAwesome.attach)
                                      ],
                                      icon: const Icon(
                                        Icons.more_vert,
                                        color: Colors.grey,
                                      ),
                                      tooltip: "Options",
                                    )
                                  ],
                                ),
                              ),
                              const SizedBox(
                                height: 5,
                              )
                            ],
                          );
                        });
                  }
                  if (state is EditEligibilityState) {
                    return EditEligibilityScreen(
                        eligibityCert: state.eligibityCert);
                  }
                  return Container();
                },
              );
            }
            return Container();
          },
        ));
  }

  PopupMenuItem<int> popMenuItem({String? text, int? value, IconData? icon}) {
    return PopupMenuItem(
      value: value,
      child: Row(
        children: [
          Icon(
            icon,
          ),
          const SizedBox(
            width: 10,
          ),
          Text(
            text!,
          ),
        ],
      ),
    );
  }
}