import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:krezus/domains/transaction/transaction_bloc.dart';
import 'package:krezus/pages/transactions/widgets/account_filter.dart';
import 'package:krezus/pages/transactions/widgets/category_filter.dart';
import 'package:krezus/pages/transactions/widgets/transaction_add_dialog.dart';

class TransactionsActions extends StatelessWidget {
  const TransactionsActions({super.key});

  Widget _smallScreenLayout(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const Text (
              'Transactions',
              style: TextStyle(
                fontWeight: FontWeight.w900,
                fontSize: 35,
              ),
            ),
            FilledButton.icon(
              onPressed: () => TransactionAddDialog.show(context, null),
              label: const Text('Add'),
              icon: const Icon(
                Icons.add
              )
            ),
          ],
        ),
        const CategoryFilter(),
        const AccountFilter(),
      ],
    );
  }

  Widget _largeScreenLayout(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        const Text(
          'Transactions',
          style: TextStyle(
            fontWeight: FontWeight.w900,
            fontSize: 35,
          ),
        ),
        const CategoryFilter(),
        const AccountFilter(),
        IconButton(
          onPressed: () => TransactionAddDialog.show(context, null),
          icon: const Icon(
            Icons.add
          )
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    bool smallVerticalScreen = MediaQuery.sizeOf(context).width < 800;
    return BlocBuilder<TransactionBloc, TransactionState>(
      builder: (context, state) => Container(
        padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 10),
        margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 10),
        child: smallVerticalScreen ? _smallScreenLayout(context) : _largeScreenLayout(context),
      )
    );
  }
}