import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:stackwallet/providers/providers.dart';
import 'package:stackwallet/themes/stack_colors.dart';
import 'package:stackwallet/utilities/constants.dart';
import 'package:stackwallet/utilities/enums/coin_enum.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/widgets/background.dart';
import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
import 'package:stackwallet/widgets/rounded_white_container.dart';
import 'package:stackwallet/widgets/wallet_info_row/sub_widgets/wallet_info_row_balance.dart';
import 'package:stackwallet/widgets/wallet_info_row/sub_widgets/wallet_info_row_coin_icon.dart';

class ChooseFromStackView extends ConsumerStatefulWidget {
  const ChooseFromStackView({
    Key? key,
    required this.coin,
  }) : super(key: key);

  final Coin coin;

  static const String routeName = "/chooseFromStack";

  @override
  ConsumerState<ChooseFromStackView> createState() =>
      _ChooseFromStackViewState();
}

class _ChooseFromStackViewState extends ConsumerState<ChooseFromStackView> {
  late final Coin coin;

  @override
  void initState() {
    coin = widget.coin;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final walletIds = ref.watch(walletsChangeNotifierProvider
        .select((value) => value.getWalletIdsFor(coin: coin)));

    return Background(
      child: Scaffold(
        backgroundColor: Theme.of(context).extension<StackColors>()!.background,
        appBar: AppBar(
          leading: const AppBarBackButton(),
          title: Text(
            "Choose your ${coin.ticker.toUpperCase()} wallet",
            style: STextStyles.navBarTitle(context),
          ),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: walletIds.isEmpty
              ? Column(
                  children: [
                    RoundedWhiteContainer(
                      child: Center(
                        child: Text(
                          "No ${coin.ticker.toUpperCase()} wallets",
                          style: STextStyles.itemSubtitle(context),
                        ),
                      ),
                    ),
                  ],
                )
              : ListView.builder(
                  itemCount: walletIds.length,
                  itemBuilder: (context, index) {
                    final manager = ref.watch(walletsChangeNotifierProvider
                        .select((value) => value.getManager(walletIds[index])));

                    return Padding(
                      padding: const EdgeInsets.symmetric(vertical: 5.0),
                      child: RawMaterialButton(
                        splashColor: Theme.of(context)
                            .extension<StackColors>()!
                            .highlight,
                        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(
                            Constants.size.circularBorderRadius,
                          ),
                        ),
                        padding: const EdgeInsets.all(0),
                        // color: Theme.of(context).extension<StackColors>()!.popupBG,
                        elevation: 0,
                        onPressed: () async {
                          if (mounted) {
                            Navigator.of(context).pop(manager.walletId);
                          }
                        },
                        child: RoundedWhiteContainer(
                          // color: Colors.transparent,
                          child: Row(
                            children: [
                              WalletInfoCoinIcon(coin: coin),
                              const SizedBox(
                                width: 12,
                              ),
                              Expanded(
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      manager.walletName,
                                      style: STextStyles.titleBold12(context),
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                    const SizedBox(
                                      height: 2,
                                    ),
                                    WalletInfoRowBalance(
                                      walletId: walletIds[index],
                                    ),
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                    );
                  },
                ),
        ),
      ),
    );
  }
}