import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:grouped_list/grouped_list.dart';
import 'package:satu/core/models/flow/dao/transaction_dao.dart';
import 'package:satu/core/redux/actions/journal_actions.dart';
import 'package:satu/core/redux/state/journal_state.dart';
import 'package:satu/core/redux/store.dart';
import 'package:satu/shared/app_colors.dart';
import 'package:satu/widgets/bar/products_app_bar.dart';
import 'package:satu/widgets/buttons/option_pill.dart';
import 'component/transaction_item.dart';

class JournalView extends StatefulWidget {
  @override
  _JournalViewState createState() => _JournalViewState();
}

class _JournalViewState extends State<JournalView> {
  int tabIndex = 0;

  @override
  void initState() {
    Redux.store!.dispatch(loadJournalData);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const ProductsAppBar(
        title: 'Журнал транзакции',
      ),
      body: StoreConnector<AppState, JournalState>(
          converter: (store) => store.state.journalState!,
          builder: (context, snapshot) {
            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 24),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        OptionPill(
                          text: 'Все',
                          selected: snapshot.tabIndex == 0,
                          onTap: () {
                            setState(() {
                              tabIndex = 0;
                            });
                          },
                        ),
                        OptionPill(
                          text: 'Приход',
                          selected: snapshot.tabIndex == 1,
                          onTap: () {
                            setState(() {
                              tabIndex = 1;
                            });
                          },
                        ),
                        OptionPill(
                          text: 'Расход',
                          selected: snapshot.tabIndex == 2,
                          onTap: () {
                            setState(() {
                              tabIndex = 2;
                            });
                          },
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(
                    height: 16,
                  ),
                  Expanded(
                    child: GroupedListView<TransactionDao, String>(
                      physics: const BouncingScrollPhysics(),
                      elements: snapshot.items!,
                      groupBy: (element) => element.day!,
                      groupSeparatorBuilder: (String groupByValue) => Text(
                        groupByValue,
                        style: const TextStyle(
                          color: textColor,
                          fontSize: 14,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      itemBuilder: (context, TransactionDao element) =>
                          TransactionItem(
                        fullName: 'Чек № ${element.number} 13:03:05',
                        status: element.contragentName,
                        amount: element.total.toString(),
                        received: true,
                      ),
                      itemComparator: (item1, item2) =>
                          item1.day!.compareTo(item2.day!),
                      // optional
                      useStickyGroupSeparators: true,
                      // optional
                      floatingHeader: true,
                      // optional
                      order: GroupedListOrder.DESC, // optional
                    ),
                  ),
                ],
              ),
            );
          }),
    );
  }
}