import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:intl/intl.dart';
import 'package:tunas/domains/budget/budget_bloc.dart';
import 'package:tunas/domains/category/category_bloc.dart';
import 'package:tunas/pages/common/titled_container.dart';
import 'package:tunas/repositories/metadata/models/budget.dart';

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

  List<Widget> _computeBudgetLines(BuildContext context, List<Budget> budgets, double initialBudget, double remainingBudget) {
    final categoryState = context.watch<CategoryBloc>().state;
    List<Widget> list = [];

    list.add(
      Container(
        margin: const EdgeInsets.only(top: 5, bottom: 5),
        padding: const EdgeInsets.only(bottom: 10),
        child: Flex(
          direction: Axis.horizontal,
          children: [Expanded(
          child: 
            TextFormField(
              keyboardType: const TextInputType.numberWithOptions(decimal: false),
              decoration: InputDecoration(
                icon: const Icon(Icons.euro),
                hintText: '\$\$\$',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(5),
                ),
              ),
              initialValue: initialBudget.toString(),
              onChanged: (value) => context.read<BudgetBloc>().add(BudgetSetInitial(double.parse(value)))
            )
          
        )]
      ))
    );

    list.addAll(budgets.map((budget) => Row(
        children: [
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Expanded(
                  child: DropdownButtonFormField<String>(
                    value: budget.label,
                    onChanged: (value) => context.read<BudgetBloc>().add(BudgetSetLabel(budget, value!)),
                    items: categoryState.categories.map((e) => DropdownMenuItem(value: e.label, child: Text(e.label))).toList(),
                  ),
                ),
                const SizedBox(width: 20),
                Text(
                  NumberFormat('####000 €', 'fr_FR').format(budget.value),
                  style: const TextStyle(
                    fontFamily: 'NovaMono',
                    fontWeight: FontWeight.bold,
                    fontSize: 15,
                  )
                ),
              ],
            )
          ),
          Expanded(
            child: SliderTheme(
              data: const SliderThemeData(),
              child: Slider(
                min: 0,
                max: initialBudget,
                label: budget.value.round().toString(),
                value: budget.value,
                secondaryTrackValue: remainingBudget + budget.value,
                onChanged: (value) => context.read<BudgetBloc>().add(BudgetSetValue(budget, value.round().toDouble())),
              ),
            )
          ),
          IconButton(
            onPressed: () => context.read<BudgetBloc>().add(BudgetRemove(budget)),
            icon: const Icon(Icons.delete),
          ),
        ],
    )).toList());

    list.add(
      Container(
        margin: const EdgeInsets.only(top: 25, bottom: 5),
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              width: 2,
              color: Theme.of(context).colorScheme.onPrimaryContainer
            )
          )
        ),
      )
    );

    list.add(
      Row(
        children: [
          Text(
            '   Remaining ${NumberFormat('#####00 €', 'fr_FR').format(remainingBudget)} out of ${NumberFormat('#####00 €', 'fr_FR').format(initialBudget)}',
            style: const TextStyle(
              fontFamily: 'NovaMono',
              fontWeight: FontWeight.bold,
              fontSize: 15,
            )
          )
        ],
      )
    );
    return list;
  }

  @override
  Widget build(BuildContext context) {
    final categoryState = context.watch<CategoryBloc>().state;
    return BlocBuilder<BudgetBloc, BudgetState>(
      builder: (context, state) => TitledContainer(
        title: 'Prepare',
        action: IconButton(
          onPressed: () => context.read<BudgetBloc>().add(BudgetAdd(categoryState.categories.first.label)),
          icon: const Icon(Icons.add),
        ),
        child: Column(
          children: _computeBudgetLines(context, state.budgets, state.initialBudget, state.remainingBudget),
        ),
      )
    );
  }
}