import 'package:currency_picker/currency_picker.dart';
import 'package:flutter/material.dart';
import 'package:flutter_iconpicker/flutter_iconpicker.dart';
import 'package:introduction_screen/introduction_screen.dart';
import 'package:prasule/api/category.dart';
import 'package:prasule/api/wallet.dart';
import 'package:prasule/api/walletmanager.dart';
import 'package:prasule/pw/platformbutton.dart';
import 'package:prasule/pw/platformdialog.dart';
import 'package:prasule/pw/platformfield.dart';
import 'package:prasule/views/home.dart';

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

  @override
  State<SetupView> createState() => _SetupViewState();
}

class _SetupViewState extends State<SetupView> {
  var _selectedCurrency = Currency.from(json: {
    "code": "USD",
    "name": "United States Dollar",
    "symbol": "\$",
    "flag": "USD",
    "decimal_digits": 2,
    "number": 840,
    "name_plural": "US dollars",
    "thousands_separator": ",",
    "decimal_separator": ".",
    "space_between_amount_and_symbol": false,
    "symbol_on_left": true,
  });
  var categories = <WalletCategory>[
    WalletCategory(
      name: "Health",
      type: EntryType.expense,
      id: 1,
      icon: IconData(Icons.medical_information.codePoint,
          fontFamily: 'MaterialIcons'),
    ),
    WalletCategory(
      name: "Car",
      type: EntryType.expense,
      id: 2,
      icon: IconData(Icons.car_repair.codePoint, fontFamily: 'MaterialIcons'),
    ),
    WalletCategory(
      name: "Food",
      type: EntryType.expense,
      id: 3,
      icon: IconData(Icons.restaurant.codePoint, fontFamily: 'MaterialIcons'),
    ),
    WalletCategory(
      name: "Travel",
      type: EntryType.expense,
      id: 4,
      icon: IconData(Icons.train.codePoint, fontFamily: 'MaterialIcons'),
    ),
  ];
  var name = "";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: IntroductionScreen(
            dotsDecorator: DotsDecorator(
              activeColor: Theme.of(context).colorScheme.primary,
            ),
            showNextButton: true,
            showBackButton: true,
            showDoneButton: true,
            next: const Text("Next"),
            back: const Text("Back"),
            done: const Text("Finish"),
            onDone: () {
              if (name.isEmpty) {
                ScaffoldMessenger.of(context)
                    .clearSnackBars(); // TODO: iOS replacement
                ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text("Name cannot be empty")));
                return;
              }
              var wallet = Wallet(
                  name: name,
                  currency: _selectedCurrency,
                  categories: categories);
              WalletManager.saveWallet(wallet).then(
                (value) => Navigator.of(context).pushReplacement(
                  MaterialPageRoute(
                    builder: (c) => const HomeView(),
                  ),
                ),
              );
            },
            pages: [
              PageViewModel(
                decoration:
                    const PageDecoration(bodyAlignment: Alignment.center),
                titleWidget: const Padding(
                  padding: EdgeInsets.all(8),
                  child: Text(
                    "Welcome!",
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                    textAlign: TextAlign.center,
                  ),
                ),
                bodyWidget: const Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Flexible(
                        child: Text(
                            "Prašule is an expense tracker tool designed for people, who don't want to spend too much time filling in all the little details.")),
                    SizedBox(
                      height: 5,
                    ),
                    Flexible(
                        child: Text(
                            "On this screen you will set up your 'wallet', in which you will track your expenses categorized under categories, which you can later set in the settings menu.")),
                  ],
                ),
              ),
              PageViewModel(
                decoration:
                    const PageDecoration(bodyAlignment: Alignment.center),
                titleWidget: const Padding(
                  padding: EdgeInsets.all(8),
                  child: Text(
                    "Set your wallet's name and currency",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                ),
                bodyWidget: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SizedBox(
                      width: MediaQuery.of(context).size.width * 0.7,
                      child: PlatformField(
                        labelText: "Your awesome name here...",
                        onChanged: (t) {
                          name = t;
                        },
                      ),
                    ),
                    const SizedBox(
                      height: 5,
                    ),
                    PlatformButton(
                      text: "Currency: ${_selectedCurrency.code}",
                      onPressed: () {
                        showCurrencyPicker(
                          context: context,
                          onSelect: (currency) {
                            _selectedCurrency = currency;
                            setState(() {});
                          },
                        );
                      },
                    )
                  ],
                ),
              ),
              PageViewModel(
                decoration:
                    const PageDecoration(bodyAlignment: Alignment.center),
                titleWidget: const Padding(
                  padding: EdgeInsets.all(8),
                  child: Text(
                    "Create categories",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                ),
                bodyWidget: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text(
                      "Tap on the icon or name to edit it",
                      textAlign: TextAlign.center,
                    ),
                    SizedBox(
                      height: MediaQuery.of(context).size.height * 0.64,
                      child: ListView.builder(
                        shrinkWrap: true,
                        itemBuilder: (context, i) => ListTile(
                          leading: GestureDetector(
                            onTap: () async {
                              var icon = await FlutterIconPicker.showIconPicker(
                                  context);
                              if (icon == null) return;
                              categories[i].icon = icon;
                              setState(() {});
                            },
                            child: Container(
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(16),
                                  color:
                                      Theme.of(context).colorScheme.secondary),
                              child: Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Icon(
                                  categories[i].icon,
                                  color:
                                      Theme.of(context).colorScheme.onSecondary,
                                ),
                              ),
                            ),
                          ),
                          trailing: IconButton(
                            icon: const Icon(Icons.cancel),
                            onPressed: () {
                              categories.removeAt(i);
                              setState(() {});
                            },
                          ),
                          title: GestureDetector(
                            onTap: () {
                              var controller = TextEditingController(
                                  text: categories[i].name);
                              showDialog(
                                context: context,
                                builder: (c) => PlatformDialog(
                                  actions: [
                                    TextButton(
                                      onPressed: () {
                                        if (controller.text.isEmpty) return;
                                        categories[i].name = controller.text;
                                        Navigator.of(context).pop();
                                      },
                                      child: const Text("Ok"),
                                    ),
                                    TextButton(
                                      onPressed: () {
                                        Navigator.of(context).pop();
                                      },
                                      child: const Text("Cancel"),
                                    ),
                                  ],
                                  title: "Editing name",
                                  content: SizedBox(
                                    width: 400,
                                    child:
                                        PlatformField(controller: controller),
                                  ),
                                ),
                              );
                            },
                            child: Text(
                              categories[i].name,
                              style:
                                  const TextStyle(fontWeight: FontWeight.bold),
                            ),
                          ),
                        ),
                        itemCount: categories.length,
                      ),
                    ),
                    IconButton(
                      onPressed: () {
                        var id = 1;
                        while (categories
                            .where((element) => element.id == id)
                            .isNotEmpty) {
                          id++; // create unique ID
                        }
                        categories.add(
                          WalletCategory(
                            name: "Edit me",
                            type: EntryType.expense,
                            id: id,
                            icon: IconData(Icons.question_mark.codePoint,
                                fontFamily: 'MaterialIcons'),
                          ),
                        );
                        setState(() {});
                      },
                      icon: const Icon(Icons.add),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}