import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import '../../../global/api.dart';
import '../../../global/store.dart';
import '../../../global/styles.dart';
import '../../../models/budget_category_model.dart';
import '../../../models/transaction_model.dart';

class AddTransactionDialog extends ConsumerStatefulWidget {
  const AddTransactionDialog({super.key});

  @override
  ConsumerState<AddTransactionDialog> createState() =>
      _AddTransactionDialogState();
}

class _AddTransactionDialogState extends ConsumerState<AddTransactionDialog> {
  final amountController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final List<BudgetCategory> budgetCategories =
        ref.read(Store().budgetCategoriesProvider).requireValue;
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
        side: const BorderSide(color: Styles.purpleNurple, width: 5.0),
      ),
      child: StatefulBuilder(builder: (context, setState) {
        TransactionType transactionType = TransactionType.expense;
        BudgetCategory selectedBudgetCategory = budgetCategories.first;
        return Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10.0),
            color: Styles.purpleNurple,
          ),
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Row(children: [
                  InkWell(
                    onTap: transactionType == TransactionType.expense
                        ? null
                        : () {
                            setState(() =>
                                transactionType = TransactionType.expense);
                          },
                    child: AnimatedContainer(
                      height: 30,
                      width: 70,
                      decoration: BoxDecoration(
                          borderRadius: const BorderRadius.only(
                              topLeft: Radius.circular(8.0),
                              topRight: Radius.circular(8.0)),
                          color: transactionType == TransactionType.expense
                              ? Styles.lavender
                              : Styles.sand),
                      duration: const Duration(milliseconds: 300),
                      child: const Padding(
                        padding: EdgeInsets.all(8.0),
                        child: Text('Expense'),
                      ),
                    ),
                  ),
                  InkWell(
                    onTap: transactionType == TransactionType.income
                        ? null
                        : () {
                            setState(
                                () => transactionType = TransactionType.income);
                          },
                    child: AnimatedContainer(
                      height: 30,
                      width: 70,
                      decoration: BoxDecoration(
                          borderRadius: const BorderRadius.only(
                              topLeft: Radius.circular(8.0),
                              topRight: Radius.circular(8.0)),
                          color: transactionType == TransactionType.income
                              ? Styles.lavender
                              : Styles.sand),
                      duration: const Duration(milliseconds: 300),
                      child: const Padding(
                        padding: EdgeInsets.all(8.0),
                        child: Text('Income'),
                      ),
                    ),
                  ),
                ]),
                Row(
                  children: [
                    const Text('Amount:'),
                    SizedBox(
                      width: 80,
                      child: TextField(
                        controller: amountController,
                        decoration: InputDecoration(
                          fillColor: Styles.lavender,
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10.0),
                            borderSide:
                                const BorderSide(color: Colors.transparent),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    const Padding(
                      padding: EdgeInsets.only(right: 28.0),
                      child: Text('Category:'),
                    ),
                    DropdownButton<BudgetCategory>(
                      value: selectedBudgetCategory,
                      items: budgetCategories
                          .map(
                            (e) => DropdownMenuItem(
                              value: e,
                              child: Text(e.name),
                            ),
                          )
                          .toList(),
                      onChanged: (BudgetCategory? value) {
                        if (value != null) {
                          if (kDebugMode) {
                            print('${value.name} selected');
                          }
                          setState(() => selectedBudgetCategory = value);
                        }
                      },
                    ),
                  ],
                ),
                ElevatedButton(
                  child: const Text('Add'),
                  onPressed: () {
                    Api().put(
                        path: 'transactions',
                        data: Transaction(
                            amount: double.parse(amountController.text),
                            addedByUserId: 1,
                            budgetCategoryId: 1,
                            budgetId: 1,
                            date: DateTime.now(),
                            transactionType: transactionType));
                    Navigator.pop(context);
                  },
                ),
              ],
            ),
          ),
        );
      }),
    );
  }
}