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';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class SetupView extends StatefulWidget {
  const SetupView({super.key, this.newWallet = false});

  /// We are only creating a new wallet, no first-time setup
  final bool newWallet;
  @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>[];
  var name = "";

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (categories.isEmpty) {
      categories = [
        WalletCategory(
          name: AppLocalizations.of(context)!.categoryHealth,
          type: EntryType.expense,
          id: 1,
          icon: IconData(Icons.medical_information.codePoint,
              fontFamily: 'MaterialIcons'),
        ),
        WalletCategory(
          name: AppLocalizations.of(context)!.categoryCar,
          type: EntryType.expense,
          id: 2,
          icon:
              IconData(Icons.car_repair.codePoint, fontFamily: 'MaterialIcons'),
        ),
        WalletCategory(
          name: AppLocalizations.of(context)!.categoryFood,
          type: EntryType.expense,
          id: 3,
          icon:
              IconData(Icons.restaurant.codePoint, fontFamily: 'MaterialIcons'),
        ),
        WalletCategory(
          name: AppLocalizations.of(context)!.categoryTravel,
          type: EntryType.expense,
          id: 4,
          icon: IconData(Icons.train.codePoint, fontFamily: 'MaterialIcons'),
        ),
      ];
      setState(() {});
    }
  }

  @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: Text(AppLocalizations.of(context)!.next),
            back: Text(AppLocalizations.of(context)!.back),
            done: Text(AppLocalizations.of(context)!.finish),
            onDone: () {
              if (name.isEmpty) {
                ScaffoldMessenger.of(context)
                    .clearSnackBars(); // TODO: iOS replacement
                ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                    content:
                        Text(AppLocalizations.of(context)!.errorEmptyName)));
                return;
              }
              var wallet = Wallet(
                  name: name,
                  currency: _selectedCurrency,
                  categories: categories);
              WalletManager.saveWallet(wallet).then(
                (value) {
                  if (!value) {
                    ScaffoldMessenger.of(context).clearSnackBars();
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content:
                            Text(AppLocalizations.of(context)!.walletExists),
                      ),
                    );
                    return;
                  }
                  if (widget.newWallet) {
                    Navigator.of(context).pop();
                    return;
                  }
                  Navigator.of(context).pushReplacement(
                    MaterialPageRoute(
                      builder: (c) => const HomeView(),
                    ),
                  );
                },
              );
            },
            pages: [
              PageViewModel(
                decoration:
                    const PageDecoration(bodyAlignment: Alignment.center),
                titleWidget: Padding(
                  padding: const EdgeInsets.all(8),
                  child: Text(
                    AppLocalizations.of(context)!.welcome,
                    style: const TextStyle(
                        fontSize: 24, fontWeight: FontWeight.bold),
                    textAlign: TextAlign.center,
                  ),
                ),
                bodyWidget: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    if (!widget.newWallet)
                      Flexible(
                        child: Text(
                            AppLocalizations.of(context)!.welcomeAboutPrasule),
                      ),
                    if (!widget.newWallet)
                      const SizedBox(
                        height: 5,
                      ),
                    Flexible(
                      child: Text(
                          AppLocalizations.of(context)!.welcomeInstruction),
                    ),
                  ],
                ),
              ),
              PageViewModel(
                decoration:
                    const PageDecoration(bodyAlignment: Alignment.center),
                titleWidget: Padding(
                  padding: const EdgeInsets.all(8),
                  child: Text(
                    AppLocalizations.of(context)!.setupWalletNameCurrency,
                    textAlign: TextAlign.center,
                    style: const TextStyle(
                        fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                ),
                bodyWidget: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SizedBox(
                      width: MediaQuery.of(context).size.width * 0.7,
                      child: PlatformField(
                        labelText:
                            AppLocalizations.of(context)!.setupNamePlaceholder,
                        onChanged: (t) {
                          name = t;
                        },
                      ),
                    ),
                    const SizedBox(
                      height: 5,
                    ),
                    PlatformButton(
                      text: AppLocalizations.of(context)!
                          .setupCurrency(_selectedCurrency.code),
                      onPressed: () {
                        showCurrencyPicker(
                          context: context,
                          onSelect: (currency) {
                            _selectedCurrency = currency;
                            setState(() {});
                          },
                        );
                      },
                    )
                  ],
                ),
              ),
              PageViewModel(
                decoration:
                    const PageDecoration(bodyAlignment: Alignment.center),
                titleWidget: Padding(
                  padding: const EdgeInsets.all(8),
                  child: Text(
                    AppLocalizations.of(context)!.setupCategoriesHeading,
                    textAlign: TextAlign.center,
                    style: const TextStyle(
                        fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                ),
                bodyWidget: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      AppLocalizations.of(context)!.setupCategoriesEditHint,
                      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: Text(
                                          AppLocalizations.of(context)!.ok),
                                    ),
                                    TextButton(
                                      onPressed: () {
                                        Navigator.of(context).pop();
                                      },
                                      child: Text(
                                          AppLocalizations.of(context)!.cancel),
                                    ),
                                  ],
                                  title: AppLocalizations.of(context)!
                                      .setupCategoriesEditingName,
                                  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: AppLocalizations.of(context)!
                                .setupWalletNamePlaceholder,
                            type: EntryType.expense,
                            id: id,
                            icon: IconData(Icons.question_mark.codePoint,
                                fontFamily: 'MaterialIcons'),
                          ),
                        );
                        setState(() {});
                      },
                      icon: const Icon(Icons.add),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}