import 'package:hash_wallet/di.dart';
import 'package:hash_wallet/generated/i18n.dart';
import 'package:hash_wallet/src/widgets/hash_image_widget.dart';
import 'package:hash_wallet/themes/core/theme_store.dart';
import 'package:hash_wallet/view_model/wallet_address_list/wallet_address_list_view_model.dart';
import 'package:cw_core/crypto_currency.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';

import '../../../src/screens/receive/widgets/qr_image.dart';

class ReceiveQrCode extends StatelessWidget {
  ReceiveQrCode({
    super.key,
    required this.onTap,
    required this.largeQrMode,
    required this.addressListViewModel,
  });

  final VoidCallback onTap;
  final bool largeQrMode;
  final WalletAddressListViewModel addressListViewModel;

  static const double largeQrModeBottomPadding = 140;
  static const Duration animDuration = Duration(milliseconds: 500);
  final bool isLightMode = !(getIt.get<ThemeStore>().currentTheme.isDark);


  @override
  Widget build(BuildContext context) {
    final double targetY = largeQrMode ? largeQrModeBottomPadding+50 : 0;
    final double resolvedSize = MediaQuery.of(context).size.width * 0.5;
    final double resolvedScale = largeQrMode ? 1.7 : 1;

    return Stack(
      alignment: Alignment.topCenter,
      children: [
        AnimatedSlide(
          curve: Curves.easeOutCubic,
          duration: animDuration,
          offset: largeQrMode ? Offset(0, -1) : Offset.zero,
          child: AnimatedOpacity(
              duration: animDuration,
              opacity: largeQrMode ? 1 : 0,
              child: HashImageWidget(imageUrl:
                isLightMode
                    ? "assets/new-ui/hash-wordmark-light.svg"
                    : "assets/new-ui/hash-wordmark.svg",
                height: 45,
              )),
        ),
        GestureDetector(
          onTap: onTap,
          behavior: HitTestBehavior.opaque,
          child: TweenAnimationBuilder<double>(
              tween: Tween<double>(begin: 0, end: targetY),
              duration: animDuration,
              curve: Curves.easeOutCubic,
              builder: (context, value, child) {
                return Transform.translate(
                  offset: Offset(0, value),
                  child: child,
                );
              },
              child: Observer(
                builder: (_) => Column(
                  children: [
                    AnimatedScale(
                      curve: Curves.easeOutCubic,
                      alignment: Alignment.bottomCenter,
                      scale: resolvedScale,
                      duration: animDuration,
                      child: AnimatedContainer(
                        duration: animDuration,
                        curve: Curves.easeOutCubic,
                        width: resolvedSize,
                        height: resolvedSize,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20),
                          color: Colors.white,
                        ),
                        child: Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
                              color: addressListViewModel.hasPayjoin && !largeQrMode
                                  ? Theme.of(context).colorScheme.surfaceContainer
                                  : Colors.transparent),
                          child: ClipRRect(
                              borderRadius: BorderRadius.circular(20),
                              child: Observer(
                                  builder: (_) => QrImage(
                                        data: addressListViewModel.uri.toString(),
                                        size: resolvedSize,
                                        embeddedImagePath:
                                            addressListViewModel.tokenCurrency != null
                                                ? addressListViewModel.tokenCurrency ==
                                                        CryptoCurrency.btcln
                                                    ? addressListViewModel.qrImage
                                                    : addressListViewModel.tokenCurrency!.iconPath
                                                : addressListViewModel.qrImage,
                                      ))),
                        ),
                      ),
                    ),
                    if (addressListViewModel.hasPayjoin)
                      Opacity(
                          opacity: largeQrMode ? 0 : 1,
                          child: Container(
                              width: resolvedSize,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.vertical(bottom: Radius.circular(16)),
                                  color: Theme.of(context).colorScheme.surfaceContainer),
                              child: Padding(
                                padding: const EdgeInsets.symmetric(vertical: 2.0),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  spacing: 4,
                                  children: [
                                    HashImageWidget(imageUrl:"assets/new-ui/payjoin.svg"),
                                    Text(S.of(context).payjoin_enabled)
                                  ],
                                ),
                              ))),
                    AnimatedSize(
                        duration: animDuration,
                        curve: Curves.easeOutCubic,
                        child: SizedBox(height: largeQrMode ? largeQrModeBottomPadding+40 : 0))
                  ],
                ),
              )),
        ),
      ],
    );
  }
}