import 'dart:ui';

import 'package:auto_size_text/auto_size_text.dart';
import 'package:design/design.dart';
import 'package:design_spec/design_spec.dart';
import 'package:guru_widgets/button/purchase_button.dart';
import 'package:guru_widgets/button/single_tap_widget.dart';
import 'package:guru_widgets/common/flexible_container.dart';
import 'package:guru_widgets/common/spacer.dart';
import 'package:guru_widgets/localizations/widgets_strings.dart';
import 'package:guru_widgets/theme/guru_theme.dart';
import 'package:guru_popup/guru_popup.dart';
import 'package:guru_utils/widget/widget_utils.dart';
import 'package:guru_utils/feedback/feedback_manager.dart';

/// Created by Haoyi on 2023/6/6
///
part 'purchase_banner.g.dart';

@DesignSpec(width: 750, height: 200, specMode: SpecMode.nested)
abstract class PurchaseBannerDesignSpec implements BasicDesignSpec {
  @SpecHorizontal(40)
  double get bannerHorizontalSpcing;

  @SpecHeight(200)
  double get bannerHeight;

  @SpecOrigin(12)
  double get bannerRadius;

  @SpecHorizontal(354)
  double get removeAdsBackgroungWidth;

  @SpecHeight(144)
  double get removeAdsImageWidth;

  @SpecVertical(80)
  double get removeAdsImageEndSpacing;

  @SpecVertical(28)
  double get removeAdsImageVerticalSpacing;

  @SpecWidth(390)
  double get productDetailsWidth;

  @SpecFontSize(26)
  double get productDetailsFontSize;

  @SpecFontSize(26)
  double get productPriceFontSize;

  @SpecOffset(SpecOrigin(0), SpecVertical(1))
  Offset get productPriceTextShadowOffset;

  @SpecVertical(32)
  double get productDetailsTopSpacing;

  @SpecHorizontal(40)
  double get productDetailsStartSpacing;

  @SpecHorizontal(280)
  double get productDetailsEndSpacing;

  @SpecVertical(20)
  double get purchaseButtonTopSpacing;

  @SpecVertical(56)
  double get purchaseButtonHeight;

  @SpecWidth(168)
  double get purchaseButtonWidth;

  @SpecVertical(16)
  double get tipsSpacing;

  @SpecHeight(40)
  double get tipsSize;

  @SpecHeight(207)
  double get tipsMinHeight;

  @SpecWidth(486)
  double get tipsWidth;

  @SpecFontSize(26)
  double get tipsFontSize;

  @SpecVertical(12)
  double get tipsGap;

  @SpecHeight(24)
  double get tipsRadius;

  @SpecEdgeInsets.only(
      top: SpecHeight(22),
      bottom: SpecHeight(26),
      start: SpecWidth(32),
      end: SpecWidth(32))
  EdgeInsets get tipsContentPadding;

  @SpecHeight(70, consistent: true)
  double get summaryHeight;

  static PurchaseBannerDesignSpec create(Size size,
          {Offset offset = Offset.zero}) =>
      _PurchaseBannerDesignSpec.from(size, offset: offset);
}


class PurchaseBannerTheme {
  final Color? backgroundColor;
  final Gradient? backgroundGradient;
  final String? removeAdsImage;
  final String? removeAdsBackGround;
  final String? summary;
  final String? tipsIcon;
  final String? tips;
  final PurchaseButtonStyle? buttonStyle;

  const PurchaseBannerTheme({
    this.backgroundColor,
    this.backgroundGradient,
    this.removeAdsImage,
    this.removeAdsBackGround,
    this.summary,
    this.tipsIcon,
    this.tips,
    this.buttonStyle
  });

  static const defaultTheme = PurchaseBannerTheme();
}

class PurchaseBanner extends StatelessWidget {
  final String price;
  final Color? backgroundColor;
  final Gradient? backgroundGradient;
  final String? removeAdsImage;
  final String? removeAdsBackGround;
  final String? summary;
  final String? tipsIcon;
  final String? tips;
  final PurchaseButtonStyle? buttonStyle;
  final VoidCallback? onPurchase;
  final GlobalKey tipsKey = GlobalKey();

  PurchaseBanner(
      {required this.price,
      this.backgroundColor,
      this.backgroundGradient,
      this.removeAdsImage,
      this.removeAdsBackGround,
      this.summary,
      this.tipsIcon,
      this.tips,
      this.buttonStyle,
      this.onPurchase,
      Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    final textDirection = Directionality.of(Get.context!);

    final guruTheme = GuruTheme.of(context);
    final iconScheme = guruTheme.iconScheme;
    final designSpec = GuruThemeDesignSpec.get().purchaseBannerDesignSpec;
    final bannerTheme = guruTheme.getCustomTheme<PurchaseBannerTheme>(
                PurchaseBannerTheme.defaultTheme.runtimeType) ??
            PurchaseBannerTheme.defaultTheme;

    final color = backgroundColor ?? bannerTheme.backgroundColor;
    final gradient = backgroundGradient ?? bannerTheme.backgroundGradient ?? const LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: [Color(0xFFFFB343), Color(0xFFFFDE7A)]);
    final removeAdsBg = removeAdsBackGround ?? bannerTheme.removeAdsBackGround;
    final removeAds = removeAdsImage ?? bannerTheme.removeAdsImage;
    final summaryText = summary ?? bannerTheme.summary ?? '';
    final useTipsIcon = tipsIcon ?? bannerTheme.tipsIcon ?? iconScheme.tipsIcon;

    return FlexibleContainer(
      width: double.infinity,
      child: TapWidget(
        onTap: () {
          if (guruTheme.feedbackCapabilities.canPerform()) {
            FeedbackManager.instance.perform(FeedbackOccasion.clickItem);
          }
          onPurchase?.call();
        },
        child: FlexibleContainer(
          width: double.infinity,
          height: designSpec.bannerHeight,
          radius: BorderRadius.all(Radius.circular(designSpec.bannerRadius)),
          color: color,
          gradient: gradient,
          child: Stack(
            fit: StackFit.expand,
            children: [
              Positioned.directional(
                  width: designSpec.removeAdsBackgroungWidth,
                  textDirection: textDirection,
                  end: 0,
                  top: 0,
                  bottom: 0,
                  child: removeAdsBg != null ? Image.asset(removeAdsBg, fit: BoxFit.fill) : Container()),
              Positioned.directional(
                  textDirection: textDirection,
                  end: designSpec.removeAdsImageEndSpacing,
                  top: designSpec.removeAdsImageVerticalSpacing,
                  child: removeAds != null ? Image.asset(
                    removeAds,
                    fit: BoxFit.fill,
                    width: designSpec.removeAdsImageWidth,
                    height: designSpec.removeAdsImageWidth,
                  ): Container()),
              Positioned.directional(
                  textDirection: textDirection,
                  width: designSpec.measuredSize.width - designSpec.bannerHorizontalSpcing * 2 - designSpec.productDetailsEndSpacing,
                  start: 0,
                  top: 0,
                  bottom: 0,
                  child: Padding(
                    padding: EdgeInsets.only(left: designSpec.productDetailsStartSpacing, top: 16),
                    child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Container(
                            alignment: Alignment.centerLeft,
                            height: designSpec.summaryHeight,
                            child: 
                          AutoSizeText(
                            summaryText,
                            maxLines: 2,
                            style: TextStyle(
                                height: 1.34,
                                fontSize: designSpec.productDetailsFontSize,
                                fontWeight: GuruTheme.fwBold,
                                color: const Color(0xFF7E1E00)),
                          )),
                          SizedSpacer(height: designSpec.purchaseButtonTopSpacing),
                          PurchaseButton(
                              Size(designSpec.purchaseButtonWidth,
                                  designSpec.purchaseButtonHeight),
                              price,
                              buttonStyle: buttonStyle ?? bannerTheme.buttonStyle)
                        ],
                      ))),
              if (tips != null && tips!.isNotEmpty)
                Positioned.directional(
                  textDirection: textDirection,
                  end: designSpec.tipsSpacing,
                  top: designSpec.tipsSpacing,
                  child: GestureDetector(
                      onTap: () {
                        GuruPopup.instance.showTipsOverlay(
                            WidgetUtils.getWidgetBoundary(tipsKey, offset: Offset(0.0, designSpec.tipsSpacing + designSpec.tipsSize)),
                            width: designSpec.tipsWidth,
                            height: designSpec.tipsMinHeight,
                            radius: Radius.circular(designSpec.tipsRadius),
                            spacing: 15,
                            backgroundColor: Colors.black.withOpacity(0.9),
                            child: buildTipContent(designSpec, tips));
                      },
                      child: useTipsIcon != null
                          ? Image.asset(useTipsIcon,
                              key: tipsKey,
                              width: designSpec.tipsSize,
                              height: designSpec.tipsSize)
                          : Icon(Icons.help_outline,
                              key: tipsKey,
                              size: designSpec.tipsSize,
                              color: Colors.white)), 
                ),
            ],
          ),
        ),
      ),
    );
  }

  Widget buildTipContent(PurchaseBannerDesignSpec designSpec, String? tips) {
    return Material(
      child: Padding(
        padding: designSpec.tipsContentPadding,
        child: Text(
          tips ?? '',
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: designSpec.tipsFontSize,
            fontWeight: GuruTheme.fwSemiBold,
            color: Colors.white,
            // design : line 40 font size 26
            height: 1.6,
          ),
        ),
      ),
    );
  }
}
