import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/svg.dart';
import 'package:stackwallet/pages/pinpad_views/create_pin_view.dart';
import 'package:stackwallet/pages_desktop_specific/create_password/create_password_view.dart';
import 'package:stackwallet/providers/global/prefs_provider.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/constants.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/utilities/util.dart';
import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
import 'package:stackwallet/widgets/rounded_white_container.dart';

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

  final bool isSettings;

  static const String routeName = "/stackPrivacy";

  @override
  ConsumerState<StackPrivacyCalls> createState() => _StackPrivacyCalls();
}

class _StackPrivacyCalls extends ConsumerState<StackPrivacyCalls> {
  late final bool isDesktop;
  late bool isEasy;
  late bool infoToggle;

  @override
  void initState() {
    isDesktop = Util.isDesktop;
    isEasy = ref.read(prefsChangeNotifierProvider).externalCalls;
    infoToggle = isEasy;
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
      appBar: AppBar(
        leading: AppBarBackButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.fromLTRB(0, 40, 0, 0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "Choose your Stack experience",
                style: STextStyles.pageTitleH1(context),
              ),
              const SizedBox(
                height: 8,
              ),
              Text(
                "You can change it later in Settings",
                style: STextStyles.subtitle(context),
              ),
              const SizedBox(
                height: 36,
              ),
              Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 16,
                ),
                child: PrivacyToggle(
                  externalCallsEnabled: isEasy,
                  onChanged: (externalCalls) {
                    isEasy = externalCalls;
                    setState(() {
                      infoToggle = isEasy;
                    });
                  },
                ),
              ),
              const SizedBox(
                height: 36,
              ),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: RoundedWhiteContainer(
                  child: Center(
                    child: RichText(
                      textAlign: TextAlign.left,
                      text: TextSpan(
                        style:
                            STextStyles.label(context).copyWith(fontSize: 12.0),
                        children: infoToggle
                            ? [
                                const TextSpan(
                                    text:
                                        "Exchange data preloaded for a seamless experience."),
                                const TextSpan(
                                    text:
                                        "\n\nCoinGecko enabled: (24 hour price change shown in-app, total wallet value shown in USD or other currency)."),
                                TextSpan(
                                  text:
                                      "\n\nRecommended for most crypto users.",
                                  style: TextStyle(
                                    color: Theme.of(context)
                                        .extension<StackColors>()!
                                        .textDark,
                                    fontWeight: FontWeight.w600,
                                  ),
                                ),
                              ]
                            : [
                                const TextSpan(
                                    text:
                                        "Exchange data not preloaded (slower experience)."),
                                const TextSpan(
                                    text:
                                        "\n\nCoinGecko disabled (price changes not shown, no wallet value shown in other currencies)."),
                                TextSpan(
                                  text:
                                      "\n\nRecommended for the privacy conscious.",
                                  style: TextStyle(
                                    color: Theme.of(context)
                                        .extension<StackColors>()!
                                        .textDark,
                                    fontWeight: FontWeight.w600,
                                  ),
                                ),
                              ],
                      ),
                    ),
                  ),
                ),
              ),
              const Spacer(
                flex: 4,
              ),
              Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 16,
                  vertical: 16,
                ),
                child: Row(
                  children: [
                    Expanded(
                      child: ContinueButton(
                        isDesktop: isDesktop,
                        label: !widget.isSettings ? "Continue" : "Save changes",
                        onPressed: () {
                          ref.read(prefsChangeNotifierProvider).externalCalls =
                              isEasy;
                          if (!widget.isSettings) {
                            if (isDesktop) {
                              Navigator.of(context).pushNamed(
                                CreatePasswordView.routeName,
                              );
                            } else {
                              Navigator.of(context).pushNamed(
                                CreatePinView.routeName,
                              );
                            }
                          } else {
                            Navigator.pop(context);
                          }
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class PrivacyToggle extends StatefulWidget {
  const PrivacyToggle({
    Key? key,
    required this.externalCallsEnabled,
    this.onChanged,
  }) : super(key: key);

  final bool externalCallsEnabled;
  final void Function(bool)? onChanged;

  @override
  State<PrivacyToggle> createState() => _PrivacyToggleState();
}

class _PrivacyToggleState extends State<PrivacyToggle> {
  late bool externalCallsEnabled;

  @override
  void initState() {
    // initial toggle state
    externalCallsEnabled = widget.externalCallsEnabled;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: RawMaterialButton(
            fillColor: Theme.of(context).extension<StackColors>()!.popupBG,
            shape: RoundedRectangleBorder(
              side: !externalCallsEnabled
                  ? BorderSide.none
                  : BorderSide(
                      color: Theme.of(context)
                          .extension<StackColors>()!
                          .infoItemIcons,
                      width: 2,
                    ),
              borderRadius: BorderRadius.circular(
                Constants.size.circularBorderRadius * 2,
              ),
            ),
            onPressed: () {
              setState(() {
                // update toggle state
                externalCallsEnabled = true;
              });
              // call callback with newly set value
              widget.onChanged?.call(externalCallsEnabled);
            },
            child: Padding(
              padding: const EdgeInsets.all(
                12,
              ),
              child: Stack(
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      SvgPicture.asset(
                        Assets.svg.personaEasy,
                        width: 140,
                        height: 140,
                      ),
                      Center(
                          child: Text(
                        "Easy Crypto",
                        style: STextStyles.label(context).copyWith(
                          fontWeight: FontWeight.bold,
                        ),
                      )),
                      Center(
                        child: Text(
                          "Recommended",
                          style: STextStyles.label(context),
                        ),
                      ),
                    ],
                  ),
                  if (externalCallsEnabled)
                    Positioned(
                      top: 4,
                      right: 4,
                      child: SvgPicture.asset(
                        Assets.svg.checkCircle,
                        width: 20,
                        height: 20,
                        color: Theme.of(context)
                            .extension<StackColors>()!
                            .infoItemIcons,
                      ),
                    ),
                  if (!externalCallsEnabled)
                    Positioned(
                      top: 4,
                      right: 4,
                      child: Container(
                        width: 20,
                        height: 20,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(1000),
                          color: Theme.of(context)
                              .extension<StackColors>()!
                              .textFieldDefaultBG,
                        ),
                      ),
                    ),
                ],
              ),
            ),
          ),
        ),
        const SizedBox(
          width: 16,
        ),
        Expanded(
          child: RawMaterialButton(
            elevation: 0,
            fillColor: Theme.of(context).extension<StackColors>()!.popupBG,
            shape: RoundedRectangleBorder(
              side: externalCallsEnabled
                  ? BorderSide.none
                  : BorderSide(
                      color: Theme.of(context)
                          .extension<StackColors>()!
                          .infoItemIcons,
                      width: 2,
                    ),
              borderRadius: BorderRadius.circular(
                Constants.size.circularBorderRadius * 2,
              ),
            ),
            onPressed: () {
              setState(() {
                // update toggle state
                externalCallsEnabled = false;
              });
              // call callback with newly set value
              widget.onChanged?.call(externalCallsEnabled);
            },
            child: Padding(
              padding: const EdgeInsets.all(
                12,
              ),
              child: Stack(
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      SvgPicture.asset(
                        Assets.svg.personaIncognito,
                        width: 140,
                        height: 140,
                      ),
                      Center(
                        child: Text(
                          "Incognito",
                          style: STextStyles.label(context).copyWith(
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      Center(
                        child: Text(
                          "Privacy conscious",
                          style: STextStyles.label(context),
                        ),
                      ),
                    ],
                  ),
                  if (!externalCallsEnabled)
                    Positioned(
                      top: 4,
                      right: 4,
                      child: SvgPicture.asset(
                        Assets.svg.checkCircle,
                        width: 20,
                        height: 20,
                        color: Theme.of(context)
                            .extension<StackColors>()!
                            .infoItemIcons,
                      ),
                    ),
                  if (externalCallsEnabled)
                    Positioned(
                      top: 4,
                      right: 4,
                      child: Container(
                        width: 20,
                        height: 20,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(1000),
                          color: Theme.of(context)
                              .extension<StackColors>()!
                              .textFieldDefaultBG,
                        ),
                      ),
                    ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class ContinueButton extends ConsumerWidget {
  const ContinueButton({
    Key? key,
    required this.isDesktop,
    required this.onPressed,
    required this.label,
  }) : super(key: key);

  final String label;
  final bool isDesktop;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    if (isDesktop) {
      return SizedBox(
        width: 328,
        height: 70,
        child: TextButton(
          style: Theme.of(context)
              .extension<StackColors>()!
              .getPrimaryEnabledButtonColor(context),
          onPressed: onPressed,
          child: Text(
            label,
            style: STextStyles.button(context).copyWith(fontSize: 20),
          ),
        ),
      );
    } else {
      return TextButton(
        style: Theme.of(context)
            .extension<StackColors>()!
            .getPrimaryEnabledButtonColor(context),
        onPressed: onPressed,
        child: Text(
          label,
          style: STextStyles.button(context),
        ),
      );
    }
  }
}

// class CustomRadio extends StatefulWidget {
//   CustomRadio(this.upperCall, {Key? key}) : super(key: key);
//
//   Function upperCall;
//
//   @override
//   createState() {
//     return CustomRadioState();
//   }
// }
//
// class CustomRadioState extends State<CustomRadio> {
//   List<RadioModel> sampleData = <RadioModel>[];
//
//   @override
//   void initState() {
//     super.initState();
//     sampleData.add(
//         RadioModel(true, Assets.svg.personaEasy, 'Easy Crypto', 'Recommended'));
//     sampleData.add(RadioModel(
//         false, Assets.svg.personaIncognito, 'Incognito', 'Privacy conscious'));
//   }
//
//   @override
//   Widget build(BuildContext context) {
//     return Row(
//       mainAxisAlignment: MainAxisAlignment.center,
//       children: [
//         InkWell(
//           onTap: () {
//             setState(() {
//               // if (!sampleData[0].isSelected) {
//               widget.upperCall.call(true);
//               // }
//               for (var element in sampleData) {
//                 element.isSelected = false;
//               }
//               sampleData[0].isSelected = true;
//             });
//           },
//           child: RadioItem(sampleData[0]),
//         ),
//         InkWell(
//           onTap: () {
//             setState(() {
//               // if (!sampleData[1].isSelected) {
//               widget.upperCall.call(false);
//               // }
//               for (var element in sampleData) {
//                 element.isSelected = false;
//               }
//               sampleData[1].isSelected = true;
//             });
//           },
//           child: RadioItem(sampleData[1]),
//         )
//       ],
//     );
//   }
// }
//
// class RadioItem extends StatelessWidget {
//   final RadioModel _item;
//   const RadioItem(this._item, {Key? key}) : super(key: key);
//   @override
//   Widget build(BuildContext context) {
//     return Container(
//       margin: const EdgeInsets.all(15.0),
//       child: RoundedWhiteContainer(
//         borderColor: _item.isSelected ? const Color(0xFF0056D2) : null,
//         child: Center(
//             child: Column(
//           children: [
//             SvgPicture.asset(
//               _item.svg,
//               // color: Theme.of(context).extension<StackColors>()!.textWhite,
//               width: 140,
//               height: 140,
//             ),
//             RichText(
//               textAlign: TextAlign.center,
//               text: TextSpan(
//                 style: STextStyles.label(context).copyWith(fontSize: 12.0),
//                 children: [
//                   TextSpan(
//                       text: _item.topText,
//                       style: TextStyle(
//                           color: Theme.of(context)
//                               .extension<StackColors>()!
//                               .textDark,
//                           fontWeight: FontWeight.bold)),
//                   TextSpan(text: "\n${_item.bottomText}"),
//                 ],
//               ),
//             ),
//           ],
//         )),
//       ),
//     );
//   }
// }
//
// class RadioModel {
//   bool isSelected;
//   final String svg;
//   final String topText;
//   final String bottomText;
//
//   RadioModel(this.isSelected, this.svg, this.topText, this.bottomText);
// }