import 'package:animated_toggle_switch/animated_toggle_switch.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:uco_mobile_poc/app/modules/account_statement/views/shared/account_Statement_widget.dart';


import '../../../core/constants/app_assets.dart';
import '../../../core/constants/form_field_constants.dart';
import '../../../core/constants/translation_keys.dart';
import '../../../custom_widgets/Fields/input_field.dart';
import '../../../custom_widgets/custom_app_bar.dart';
import '../../../custom_widgets/custom_no_record.dart';
import '../../../res/app_colors.dart';
import '../controllers/account_statement_controller.dart';

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

  @override
  Widget build(BuildContext context) {
    String className = runtimeType.toString().split('.').last;
    return Scaffold(
        appBar: DashBoardAppBar(
          title: TranslationKeys.makeTranslation(TranslationKeys.textAccountStatement),
          onBackButtonPressed: () {
            Get.back();
          },
        ),
        body: Obx(() {
          return Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                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,
                  items: controller.allDepositAccounts,
                  inputColor: Colors.black,
                  onItemSelected: (item) {
                    controller.updateSelectedDeposit(item!);
                  },
                ),
                const SizedBox(height: 20),
                Text(
                  TranslationKeys.makeTranslation(
                    TranslationKeys.textStatementDetails,
                  ),
                  style: Theme.of(context).textTheme.titleSmall!.copyWith(fontSize: 14, fontWeight: FontWeight.w500),
                ),
                const SizedBox(height: 15),
                Row(
                  children: [
                    Expanded(
                      flex: 10,
                      child: AnimatedToggleSwitch<int>.size(
                        height: 30,
                        current: controller.selectedIndex.value,
                        style: ToggleStyle(
                          backgroundColor: AppColors.colorGrey350,
                          indicatorColor: AppColors.white,
                          borderColor: Colors.transparent,
                          borderRadius: BorderRadius.circular(10.0),
                          indicatorBorderRadius: const BorderRadius.only(topRight: Radius.circular(8.0), topLeft: Radius.circular(8.0), bottomRight: Radius.circular(8.0), bottomLeft: Radius.circular(8.0)),
                        ),
                        values: const [0, 1, 2, 3],
                        iconOpacity: 1.0,
                        selectedIconScale: 1.0,
                        indicatorSize: const Size.fromWidth(double.infinity),
                        iconAnimationType: AnimationType.onHover,
                        styleAnimationType: AnimationType.onHover,
                        spacing: 10.0,
                        customSeparatorBuilder: (context, local, global) {
                          final opacity = ((global.position - local.position).abs() - 0.5).clamp(0.0, 1.0);
                          return VerticalDivider(
                            indent: 10.0,
                            endIndent: 10.0,
                            color: Colors.white38.withOpacity(opacity),
                          );
                        },
                        customIconBuilder: (context, local, global) {
                          final text = const ['ALL', 'D', 'W', 'M', 'Y'][local.index];
                          return Center(
                            child: Text(
                              text,
                              style: TextStyle(
                                fontSize: 10,
                                fontWeight: FontWeight.w400,
                                color: Color.lerp(Colors.black, AppColors.black, local.animationValue),
                              ),
                            ),
                          );
                        },
                        borderWidth: 0.0,
                        onChanged: (i) {
                          controller.updateRange(i);
                        },
                      ),
                    ),
                    const SizedBox(width: 10),
                    GestureDetector(
                      onTap: () {
                        controller.showDateRangePic();
                      },
                      child: Container(
                        height: 30,
                        width: 30,
                        padding: const EdgeInsets.all(7.0),
                        decoration: const BoxDecoration(
                          color: AppColors.colorGrey350,
                          borderRadius: BorderRadius.only(topRight: Radius.circular(8.0), topLeft: Radius.circular(8.0), bottomRight: Radius.circular(8.0), bottomLeft: Radius.circular(8.0)),
                        ),
                        child: SvgPicture.asset(AppAssets.ic_filter_statement),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 15),
                controller.accountStatement.isNotEmpty
                    ? Expanded(
                        child: ListView.builder(
                          itemCount: controller.accountStatement.length,
                          itemBuilder: (context, index) {
                            return AccountStatementWidget(
                              onTap: () {},
                              statment: controller.accountStatement[index],
                            );
                          },
                        ),
                      )
                    : const Center(
                        child: CustomNoRecord(title: "No Record Found", description: "We couldn't find any activity at this moment"),
                      ),
              ],
            ),
          );
        }));
  }
}