import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:get_it/get_it.dart';
import 'package:grouped_list/grouped_list.dart';
import 'package:okane/database/collections/transaction.dart';
import 'package:okane/screen.dart';
import 'package:okane/ui/pages/account/balance_graph_card.dart';
import 'package:okane/ui/state/core.dart';
import 'package:okane/ui/utils.dart';
import 'package:okane/ui/widgets/add_transaction.dart';
import 'package:okane/ui/widgets/transaction_card.dart';

class TransactionListPage extends StatefulWidget {
  const TransactionListPage({super.key});

  @override
  State<TransactionListPage> createState() => TransactionListState();
}

class TransactionListState extends State<TransactionListPage> {
  final _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CoreCubit, CoreState>(
      builder: (context, state) {
        final account = GetIt.I.get<CoreCubit>().activeAccount;
        return Stack(
          children: [
            CustomScrollView(
              controller: _scrollController,
              slivers: [
                SliverToBoxAdapter(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 8),
                    child: AccountBalanceGraphCard(),
                  ),
                ),
                SliverToBoxAdapter(
                  child: GroupedListView(
                    physics: NeverScrollableScrollPhysics(),
                    elements: state.transactions,
                    reverse: true,
                    groupBy: (Transaction item) => formatDateTime(item.date),
                    groupHeaderBuilder:
                        (item) => Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            DecoratedBox(
                              decoration: BoxDecoration(
                                color: Colors.black.withAlpha(170),
                                borderRadius: BorderRadius.circular(8),
                              ),
                              child: Padding(
                                padding: EdgeInsets.all(4),
                                child: Text(
                                  formatDateTime(item.date),
                                  style: TextStyle(color: Colors.white),
                                ),
                              ),
                            ),
                          ],
                        ),
                    shrinkWrap: true,
                    indexedItemBuilder:
                        (ctx, item, idx) => Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 8),
                          child: TransactionCard(
                            transaction: item,
                            onTap: () {
                              GetIt.I.get<CoreCubit>().setActiveTransaction(
                                item,
                              );
                              if (getScreenSize(ctx) == ScreenSize.small) {
                                Navigator.of(
                                  context,
                                ).pushNamed("/transactions/details");
                              }
                            },
                          ),
                        ),
                  ),
                ),
              ],
            ),
            /*Column(
              children: [
                Padding(
                  padding: EdgeInsets.only(top: 16),
                  child: GroupedListView(
                        elements: state.transactions,
                        reverse: true,
                        groupBy:
                            (Transaction item) => formatDateTime(item.date),
                        groupHeaderBuilder:
                            (item) => Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                DecoratedBox(
                                  decoration: BoxDecoration(
                                    color: Colors.black.withAlpha(170),
                                    borderRadius: BorderRadius.circular(8),
                                  ),
                                  child: Padding(
                                    padding: EdgeInsets.all(4),
                                    child: Text(
                                      formatDateTime(item.date),
                                      style: TextStyle(color: Colors.white),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                        shrinkWrap: true,
                        indexedItemBuilder:
                            (ctx, item, idx) => TransactionCard(
                              transaction: item,
                              onTap: () {
                                GetIt.I.get<CoreCubit>().setActiveTransaction(
                                  item,
                                );
                                if (getScreenSize(ctx) == ScreenSize.small) {
                                  Navigator.of(
                                    context,
                                  ).pushNamed("/transactions/details");
                                }
                              },
                            ),
                      ),
                ),
              ],
            ),*/
            Positioned(
              right: 16,
              bottom: 16,
              child: FloatingActionButton(
                child: Icon(Icons.add),
                onPressed:
                    account == null
                        ? () {}
                        : () {
                          showDialogOrModal(
                            context: context,
                            builder:
                                (ctx) => AddTransactionWidget(
                                  activeAccountItem: account,
                                  onAdd: () {
                                    setState(() {});
                                    Navigator.of(context).pop();
                                  },
                                ),
                            showDragHandle: true,
                          );
                        },
              ),
            ),
          ],
        );
      },
    );
  }
}