import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:gecko/providers/my_wallets.dart';
import 'package:gecko/providers/settings_provider.dart';
import 'package:gecko/providers/substrate_sdk.dart';
import 'package:gecko/globals.dart';
import 'package:polkawallet_sdk/api/types/networkParams.dart';
import 'package:provider/provider.dart';
import 'package:dropdown_button2/dropdown_button2.dart';

// ignore: must_be_immutable
class SettingsScreen extends StatelessWidget {
  final MyWalletsProvider _myWallets = MyWalletsProvider();

  SettingsScreen({Key? key}) : super(key: key);

  // Initial Selected Value
  String? selectedDuniterEndpoint;

  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
    SubstrateSdk _sub = Provider.of<SubstrateSdk>(context, listen: false);

    const double buttonHigh = 50;
    const double buttonWidth = 240;
    const double fontSize = 16;

    // List of items in our dropdown menu
    var duniterBootstrapNodes = _sub.getDuniterBootstrap();
    selectedDuniterEndpoint = _sub.getConnectedEndpoint();

    return Scaffold(
      backgroundColor: backgroundColor,
      appBar: AppBar(
          toolbarHeight: 60 * ratio,
          title: SizedBox(
            height: 22,
            child: Text('parameters'.tr()),
          )),
      body: Column(children: <Widget>[
        const SizedBox(height: 60),

        Row(children: [
          Consumer<SubstrateSdk>(builder: (context, _sub, _) {
            log.d(_sub.sdk.api.connectedNode?.endpoint);
            return Expanded(
              child: Row(children: [
                const SizedBox(width: 10),
                Text('currencyNode'.tr(args: [currencyName])),
                const Spacer(),
                Icon(_sub.nodeConnected && !_sub.isLoadingEndpoint
                    ? Icons.check
                    : Icons.close),
                const Spacer(),
                Consumer<SettingsProvider>(builder: (context, _set, _) {
                  return DropdownButtonHideUnderline(
                    child: DropdownButton(
                      //TODO
                      value: selectedDuniterEndpoint ??
                          duniterBootstrapNodes.first.endpoint,
                      icon: const Icon(Icons.keyboard_arrow_down),
                      items: duniterBootstrapNodes
                          .map((NetworkParams _endpointParams) {
                        return DropdownMenuItem(
                          value: _endpointParams.endpoint,
                          child: Text(_endpointParams.endpoint!),
                        );
                      }).toList(),
                      onChanged: (String? _newEndpoint) {
                        log.d(_newEndpoint!);
                        selectedDuniterEndpoint = _newEndpoint;
                        _set.reload();
                      },
                    ),
                  );
                }),
                const Spacer(flex: 5),
                _sub.isLoadingEndpoint
                    ? CircularProgressIndicator(color: orangeC)
                    : Consumer<SettingsProvider>(builder: (context, _set, _) {
                        return IconButton(
                            icon: Icon(
                              Icons.send,
                              color: selectedDuniterEndpoint !=
                                      _sub.getConnectedEndpoint()
                                  ? orangeC
                                  : Colors.grey[500],
                              size: 40,
                            ),
                            onPressed: selectedDuniterEndpoint !=
                                    _sub.getConnectedEndpoint()
                                ? () async {
                                    configBox.put('customEndpoint',
                                        selectedDuniterEndpoint);
                                    await _sub.connectNode(context);
                                  }
                                : null);
                      }),
                const Spacer(flex: 8),
              ]),
            );
          }),
        ]),
        // SizedBox(height: isTall ? 80 : 120),
        const Spacer(),
        SizedBox(
          height: buttonHigh,
          width: buttonWidth,
          child: Center(
            child: InkWell(
              key: const Key('deleteChest'),
              onTap: () async {
                log.i('Oublier tous mes coffres');
                await _myWallets.deleteAllWallet(context);
              },
              child: Text(
                'forgetAllMyChests'.tr(),
                style: const TextStyle(
                  fontSize: fontSize + 4,
                  color: Color(0xffD80000),
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
          ),
        ),
        // const Spacer(),
        SizedBox(height: isTall ? 90 : 60),
      ]),
    );
  }
}