import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:grouped_list/grouped_list.dart';
import 'package:satu/core/models/entity_data/transaction_data.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/core/services/data_service.dart';
import 'package:satu/core/services/navigator_service.dart';
import 'package:satu/core/utils/locator.dart';
import 'package:satu/routes/route_names.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/journal_list_tile.dart';
import 'component/transaction_item.dart';

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

class _JournalViewState extends State<JournalView> {
  final DataService _dataService = locator<DataService>();
  final NavigatorService _navigatorService = locator<NavigatorService>();

  int tabIndex = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const ProductsAppBar(
        title: 'Журнал транзакции',
        drawerShow: true,
      ),
      body: StoreConnector<AppState, JournalState>(
          converter: (store) => store.state.journalState!,
          builder: (context, snapshot) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  decoration: const BoxDecoration(color: whiteColor),
                  child: Padding(
                    padding: const EdgeInsets.all(15.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;
                            });
                          },
                        ),
                      ],
                    ),
                  ),
                ),
                Expanded(
                  child: GroupedListView<TransactionDao, String>(
                    physics: const BouncingScrollPhysics(),
                    elements: snapshot.items!,
                    groupBy: (element) => element.day!,
                    groupSeparatorBuilder: (String groupByValue) => Padding(
                      padding: const EdgeInsets.only(
                          left: 15.0, bottom: 5.0, top: 20.0),
                      child: Text(
                        groupByValue,
                        style: const TextStyle(
                          color: placeholderColor,
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    separator: const Divider(
                      height: 1,
                      color: disableColor,
                    ),
                    itemBuilder: (context, TransactionDao element) =>
                        JournalTile(
                      title: '№ ${element.number}',
                      subTitle: element.contragentName,
                      date: element.date!,
                      amount: element.total,
                      received: element.received,
                      onPress: () {
                        pushToReceiptView(element);
                      },
                    ),
                    itemComparator: (item1, item2) =>
                        item1.day!.compareTo(item2.day!),
                    // optional
                    useStickyGroupSeparators: true,
                    stickyHeaderBackgroundColor: backgroundColor,
                    // optional
                    //floatingHeader: true,
                    // optional
                    order: GroupedListOrder.DESC, // optional
                  ),
                ),
              ],
            );
          }),
    );
  }

  Future<void> pushToReceiptView(TransactionDao element) async {
    final int? id = element.id;
    TransactionData? transactionData =
        await _dataService.getTransactionDataById(id);
    if(transactionData != null) {
      _navigatorService.push(receiptViewRoute, arguments: transactionData);
    }
  }
}