import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:nomo/config/theme/theme_extensions/theme_extension.dart';

import 'click_opacity.dart';

class SubmitButton extends StatelessWidget {
  final String text;
  final VoidCallback? onPressed;
  final bool enabled;
  final Color? textColor;
  final Color? bgColor;
  final Color? borderColor;
  final double? fontSize;
  final bool isLoading;
  final double? width;
  final double height;
  final Widget? prefixIcon;
  final List<FontFeature>? fontFeatures;

  const SubmitButton({
    super.key,
    required this.text,
    this.onPressed,
    this.enabled = true,
    this.textColor,
    this.bgColor,
    this.borderColor,
    this.fontSize,
    this.isLoading = false,
    this.width,
    this.height = 54,
    this.prefixIcon,
    this.fontFeatures,
  });

  @override
  Widget build(BuildContext context) {
    return ClickOpacity(
      onTap: isLoading ? null : onPressed,
      child: Opacity(
        opacity: enabled ? 1 : 0.3,
        child: Container(
          width: width ?? double.infinity,
          height: height.w,
          decoration: BoxDecoration(
            color: bgColor ?? Get.reactiveTheme.primaryColor,
            borderRadius: BorderRadius.circular(16.r),
            border: borderColor != null
                ? Border.all(color: borderColor!, width: 1.w)
                : null,
          ),
          child: Center(
            child: isLoading
                ? SpinKitRing(
                    size: 20.w,
                    lineWidth: 2.w,
                    color:
                        textColor ??
                        Get.reactiveTheme.textTheme.bodyLarge!.color!,
                  )
                : Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      if (prefixIcon != null) ...[
                        prefixIcon!,
                        4.horizontalSpace,
                      ],
                      Text(
                        text,
                        style: TextStyle(
                          color:
                              textColor ??
                              Get.reactiveTheme.textTheme.bodyLarge!.color,
                          fontSize: fontSize ?? 16.sp,
                          height: 1.2,
                          fontWeight: FontWeight.w500,
                          fontFeatures: fontFeatures ?? [],
                        ),
                      ),
                    ],
                  ),
          ),
        ),
      ),
    );
  }
}

class SubmitSvgButton extends StatelessWidget {
  final String svgPath;
  final double? svgWidth;
  final Color? svgColor;
  final String text;
  final VoidCallback? onPressed;
  final bool enabled;
  final Color? textColor;
  final Color? bgColor;
  final Color? borderColor;
  final double? fontSize;
  final bool isLoading;
  final double? width;
  final double height;

  const SubmitSvgButton({
    super.key,
    required this.svgPath,
    required this.text,
    this.svgColor,
    this.svgWidth,
    this.onPressed,
    this.enabled = true,
    this.textColor,
    this.bgColor,
    this.borderColor,
    this.fontSize,
    this.isLoading = false,
    this.width,
    this.height = 54,
  });

  @override
  Widget build(BuildContext context) {
    final prefixIcon = SvgPicture.asset(
      svgPath,
      colorFilter: svgColor != null
          ? ColorFilter.mode(svgColor!, BlendMode.srcIn)
          : null,
      width: svgWidth ?? 24.w,
      height: svgWidth ?? 24.w,
    );
    return SubmitButton(
      text: text,
      onPressed: onPressed,
      enabled: enabled,
      textColor: textColor,
      bgColor: bgColor,
      borderColor: borderColor,
      fontSize: fontSize,
      isLoading: isLoading,
      width: width,
      height: height,
      prefixIcon: prefixIcon,
    );
  }
}

class SubmitIconButton extends StatelessWidget {
  final IconData iconData;
  final String text;
  final double? iconSize;
  final VoidCallback? onPressed;
  final bool enabled;
  final Color? textColor;
  final Color? bgColor;
  final Color? borderColor;
  final double? fontSize;
  final bool isLoading;
  final double? width;
  final double height;
  final List<FontFeature>? fontFeatures;

  const SubmitIconButton({
    super.key,
    required this.iconData,
    required this.text,
    this.iconSize,
    this.onPressed,
    this.enabled = true,
    this.textColor,
    this.bgColor,
    this.borderColor,
    this.fontSize,
    this.isLoading = false,
    this.width,
    this.height = 54,
    this.fontFeatures,
  });

  @override
  Widget build(BuildContext context) {
    final prefixIcon = Icon(
      iconData,
      size: iconSize ?? 20.w,
      color: textColor ?? Get.reactiveTheme.textTheme.bodyLarge!.color,
    );
    return SubmitButton(
      text: text,
      onPressed: onPressed,
      enabled: enabled,
      textColor: textColor,
      bgColor: bgColor,
      borderColor: borderColor,
      fontSize: fontSize,
      isLoading: isLoading,
      width: width,
      height: height,
      prefixIcon: prefixIcon,
      fontFeatures: fontFeatures,
    );
  }
}
