import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:uco_mobile_poc/app/core/constants/app_assets.dart';
import 'package:uco_mobile_poc/app/core/constants/translation_keys.dart';
import 'package:uco_mobile_poc/app/custom_widgets/custom_app_bar.dart';
import 'package:uco_mobile_poc/app/res/app_colors.dart';
import '../../../core/constants/form_field_constants.dart';
import '../../../custom_widgets/Fields/input_field.dart';
import '../controllers/notifications_controller.dart';

class NotificationsView extends GetView<NotificationsController> {
  const NotificationsView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    String className = runtimeType.toString().split('.').last;
    return Scaffold(
      appBar: DashBoardAppBar(
        title:
            TranslationKeys.makeTranslation(TranslationKeys.textNotifications),
        onBackButtonPressed: () {
          Get.back();
        },
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Stack(
            children: [
              Container(
                  height: 25,
                  decoration: const BoxDecoration(
                    color: AppColors.colorPrimary,
                  )),
              GestureDetector(
                onTap: () {
                  controller.showDateRangePicker();
                },
                child: Padding(
                  padding: const EdgeInsets.all(0.0),
                  child: Card(
                    surfaceTintColor: Colors.white,
                    margin: const EdgeInsets.symmetric(
                        horizontal: 15, vertical: 10),
                    elevation: 5.0,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Row(
                        //mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Expanded(
                            child: Align(
                              alignment: Alignment.center,
                              child: Text(
                                TranslationKeys.makeTranslation(
                                    TranslationKeys.textFilter),
                                style: Theme.of(context)
                                    .textTheme
                                    .titleSmall!
                                    .copyWith(
                                        fontSize: 14,
                                        fontWeight: FontWeight.w400),
                              ),
                            ),
                          ),
                          Image.asset(
                            AppAssets.ic_sort,
                            height: 25,
                          ),
                          const SizedBox(
                            width: 10,
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
          // Padding(
          //   padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
          //   child: Align(
          //     alignment: Alignment.centerLeft,
          //     child: Text(
          //         TranslationKeys.makeTranslation(
          //             TranslationKeys.textPleaseSelectAccount),
          //         style: Theme.of(context)
          //             .textTheme
          //             .titleSmall
          //             ?.copyWith(color: AppColors.titleColor)),
          //   ),
          // ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
            child: controller.depositAccountField = InputField(
              refKey: FormFieldConstants.instance()
                  .getFormKey("${className}depositAccountField"),
              controller: FormFieldConstants.instance()
                  .getController("${className}depositAccountField"),
              labelText: "Select From Account",
              suffixIcon: const Icon(Icons.keyboard_arrow_down, size: 25),
              isDropDown: true,
              hintText: "Select from account",
              dropDownType: DropDownType.SPECIAL,
              isTopMarginRequired: false,
              items: controller.allDepositAccounts,
              onItemSelected: (item) {
                controller.updateSelectedDeposit(item!);
              },
            ),
          ),
          // Padding(
          //   padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
          //   child: SizedBox(
          //     height: 35,
          //     child: InkWell(
          //       onTap: () {},
          //       child: DropdownButtonHideUnderline(
          //         child: ButtonTheme(
          //           alignedDropdown: true,
          //           child: DropdownButton2<String>(
          //             isExpanded: true,
          //             hint: Row(
          //               mainAxisAlignment: MainAxisAlignment.spaceAround,
          //               children: [
          //                 const Icon(
          //                   Icons.list,
          //                   size: 20,
          //                   color: Colors.yellow,
          //                 ),
          //                 const SizedBox(
          //                   width: 4,
          //                 ),
          //                 Text(controller.selectedAccountNumber.value),
          //               ],
          //             ),
          //             items: controller.accountNumberList
          //                 .toSet()
          //                 .map((String item) => DropdownMenuItem<String>(
          //                       value: item,
          //                       child: Text(
          //                         item,
          //                         style: Theme.of(context)
          //                             .textTheme
          //                             .bodyMedium
          //                             ?.copyWith(
          //                                 fontSize: 12,
          //                                 fontWeight: FontWeight.w400,
          //                                 color: AppColors.colorText),
          //                         overflow: TextOverflow.ellipsis,
          //                       ),
          //                     ))
          //                 .toList(),
          //             value: controller.selectedAccountNumber.value,
          //             onChanged: (String? newValue) {
          //               if (newValue != null) {
          //                 controller.selectedAccountNumber.value = newValue;
          //               }
          //             },
          //             buttonStyleData: ButtonStyleData(
          //               height: 41,
          //               padding: const EdgeInsets.symmetric(
          //                   horizontal: 10, vertical: 5),
          //               decoration: BoxDecoration(
          //                 borderRadius: BorderRadius.circular(50),
          //                 border: Border.all(
          //                   color: AppColors.colorGrey350,
          //                 ),
          //                 color: AppColors.colorSecondary,
          //               ),
          //               elevation: 0,
          //             ),
          //             iconStyleData: IconStyleData(
          //               icon: SvgPicture.asset(
          //                 AppAssets.ic_arrow_down,
          //                 height: 15,
          //                 width: 15,
          //               ),
          //               iconEnabledColor: AppColors.colorText,
          //               iconDisabledColor: AppColors.colorText,
          //             ),
          //             dropdownStyleData: DropdownStyleData(
          //               maxHeight: 150,
          //               width: 320,
          //               decoration: BoxDecoration(
          //                 borderRadius: BorderRadius.circular(7),
          //                 color: AppColors.colorSecondary,
          //               ),
          //               offset: const Offset(-2, 0),
          //               scrollbarTheme: ScrollbarThemeData(
          //                 radius: const Radius.circular(40),
          //                 thickness: MaterialStateProperty.all<double>(5),
          //                 thumbVisibility:
          //                     MaterialStateProperty.all<bool>(true),
          //               ),
          //             ),
          //             menuItemStyleData: const MenuItemStyleData(
          //               height: 30,
          //               padding: EdgeInsets.only(left: 14, right: 14),
          //             ),
          //           ),
          //         ),
          //       ),
          //     ),
          //   ),
          // ),
          Expanded(
            flex: 4,
            child: controller.notificationList.isEmpty
                ? const Center(
                    child: Text("No notifications are found"),
                  )
                : ListView.builder(
                    itemCount: controller.notificationList.length,
                    itemBuilder: (context, index) {
                      return InkWell(
                        onTap: () {
                          controller.showDialogFunction(context);
                        },
                        child: Padding(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 15, vertical: 0),
                          child: Card(
                            elevation: 2.0,
                            color: AppColors.white,
                            child: Padding(
                              padding: const EdgeInsets.all(10.0),
                              child: Column(
                                children: [
                                  Row(
                                    children: [
                                      Text(
                                        controller
                                            .notificationList[0].description,
                                        overflow: TextOverflow.ellipsis,
                                        maxLines: 1,
                                        style: Theme.of(context)
                                            .textTheme
                                            .bodySmall
                                            ?.copyWith(
                                                fontSize: 10,
                                                fontWeight: FontWeight.w400),
                                      )
                                    ],
                                  ),
                                  const SizedBox(height: 5),
                                  Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: <Widget>[
                                      Expanded(
                                        child: Text(
                                          controller
                                              .notificationList[0].dateTime,
                                          overflow: TextOverflow.ellipsis,
                                          maxLines: 1,
                                          style: Theme.of(context)
                                              .textTheme
                                              .bodySmall
                                              ?.copyWith(
                                                  fontSize: 10,
                                                  fontWeight: FontWeight.w400),
                                        ),
                                      ),
                                      //const Expanded(child: SizedBox()),
                                      Expanded(
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.end,
                                          children: [
                                            Container(
                                              height: 13,
                                              width: 0.5,
                                              color: AppColors.colorGrey800,
                                            ),
                                            const SizedBox(
                                              width: 10,
                                            ),
                                            Text(
                                              "Read more",
                                              overflow: TextOverflow.ellipsis,
                                              maxLines: 1,
                                              style: Theme.of(context)
                                                  .textTheme
                                                  .bodySmall
                                                  ?.copyWith(
                                                      color: AppColors
                                                          .colorPrimary,
                                                      fontSize: 10,
                                                      fontWeight:
                                                          FontWeight.w400),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                      );
                    },
                  ),
          ),
        ],
      ),
    );
  }
}