import 'package:flutter/material.dart';

import '/models/expense.dart';
import '/models/frequency.dart';

List<Expense> expenses = [];

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

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: expenses.length,
        itemBuilder: (_, index) {
          final Expense curr = expenses[index];
          return Center(
            child: Padding(
              padding: const EdgeInsets.all(4.0),
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(4),
                  color: Colors.greenAccent,
                ),
                child: Column(
                  children: [
                    Text(curr.name),
                    Text("${curr.cost.toString()} ${curr.frequency.title}"),
                  ],
                ),
              ),
            ),
          );
        });
    /*
    return ListView(
      children: [
        ListTile(
          title: Text("Fake Item 1"),
          subtitle: Text("30.00 / month"),
        ),
        ListTile(
          title: Text("Fake Item 2"),
          subtitle: Text("180.00 / year"),
        ),
      ],
    );
    */
  }
}

class ExpenseInputDialog extends StatefulWidget {
  const ExpenseInputDialog({
    super.key,
  });

  @override
  State<ExpenseInputDialog> createState() => _ExpenseInputDialogState();
}

class _ExpenseInputDialogState extends State<ExpenseInputDialog> {
  final _expenseFormKey = GlobalKey<FormState>();

  String _name = "";
  double _cost = 0.0;
  Frequency _freq = Frequency.montly;
  String _desc = "";

  @override
  Widget build(BuildContext context) {
    const inputWidth = 300.0;
    const inputHeight = 50.0;

    List<DropdownMenuItem> freqValues = [];
    for (var freq in Frequency.values) {
      freqValues.add(DropdownMenuItem(value: freq, child: Text(freq.title)));
    }
    ;

    return AlertDialog(
      title: Center(child: Text("Add New Expense")),
      content: Form(
        key: _expenseFormKey,
        autovalidateMode: AutovalidateMode.onUserInteraction,
        child: Column(mainAxisSize: MainAxisSize.min, spacing: 10, children: [
          SizedBox(
            width: inputWidth,
            height: inputHeight,
            child: TextFormField(
              keyboardType: TextInputType.text,
              decoration: InputDecoration(
                labelText: "Name",
                hintText: "Example: Red Pocket Phone Bill",
              ),
              validator: (value) {
                if (value!.isEmpty) {
                  return "Name must be provided.";
                }
                return null;
              },
              onSaved: (newValue) {
                _name = newValue!;
              },
            ),
          ),
          SizedBox(
            width: inputWidth,
            height: inputHeight,
            child: TextFormField(
              keyboardType: TextInputType.numberWithOptions(decimal: true),
              decoration: InputDecoration(
                  labelText: "Cost", hintText: "Example: 10.00"),
              validator: (value) {
                if (value!.isEmpty) {
                  return "Cost must be provided.";
                }
                if (double.tryParse(value) == null) {
                  return "Cost must be a valid number.";
                }
                return null;
              },
              onSaved: (newValue) {
                _cost = double.parse(newValue!);
              },
            ),
          ),
          SizedBox(
            width: inputWidth,
            height: inputHeight,
            child: DropdownButtonFormField(
              items: freqValues,
              decoration: InputDecoration(
                  labelText: "Recurrence", hintText: "Example: Monthly"),
              validator: (value) {
                if (value == null) {
                  return "Frequency must be provided.";
                }
                if (!Frequency.values.contains(value)) {
                  return "Value not valid.";
                }
                return null;
              },
              onChanged: (newValue) {
                _freq = newValue;
              },
            ),
          ),
          SizedBox(
            width: inputWidth,
            height: inputHeight,
            child: TextFormField(
              keyboardType: TextInputType.text,
              decoration: InputDecoration(
                  labelText: "Description",
                  hintText: "Example: 1GB data with unlimited talk & text."),
              validator: (value) {
                return null;
              },
              onSaved: (newValue) {
                _desc = newValue!;
              },
            ),
          ),
        ]),
      ),
      actions: [
        SizedBox(
          width: inputWidth,
          height: inputHeight,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ElevatedButton.icon(
                onPressed: () {
                  print("TODO: Clear fields!");
                  Navigator.of(context).pop();
                },
                icon: Icon(Icons.cancel),
                label: Text('Cancel'),
              ),
              ElevatedButton.icon(
                onPressed: () {
                  print("TODO: Save expense!");
                  if (_expenseFormKey.currentState!.validate()) {
                    _expenseFormKey.currentState!.save();
                    setState(() {
                      expenses.add(
                        Expense(
                            name: _name,
                            cost: _cost,
                            frequency: _freq,
                            description: _desc),
                      );
                    });
                    print(expenses.toString());
                    for (var expense in expenses) {
                      print(expense.toString());
                    }
                    Navigator.of(context).pop();
                  }
                },
                icon: Icon(Icons.save),
                label: Text('Submit'),
              ),
            ],
          ),
        )
      ],
    );
  }
}