import React, { ReactElement, useEffect, useState } from 'react';
import { twMerge } from 'tailwind-merge';

import { DEFAULT_BUTTON_AURA_IMAGE } from '@/components/button/Button';
import SpinnerSVG from '@/components/svg/SpinnerSVG';

interface AuraButtonProps {
  onClick: () => void;
  text: string;
  icon?: ReactElement;
  isDisabled?: boolean;
  isLoading?: boolean;
  fullWidth?: boolean;
  extraClasses?: string;
  textExtraClasses?: string;
  iconExtraClasses?: string;
  label?: string;
  backgroundImage?: string;
  extraStyles?: React.CSSProperties;
  useV4ButtonStyle?: boolean;
  borderRadius?: string;
}

const AuraButton: React.FC<AuraButtonProps> = ({
  extraStyles,
  onClick,
  text,
  icon,
  isDisabled = false,
  isLoading = false,
  fullWidth,
  extraClasses,
  textExtraClasses = '',
  iconExtraClasses = '',
  label,
  backgroundImage = DEFAULT_BUTTON_AURA_IMAGE,
  useV4ButtonStyle = false,
  borderRadius,
}) => {
  const isDefaultBackground = backgroundImage === DEFAULT_BUTTON_AURA_IMAGE;

  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  return (
    <>
      {isClient &&
        (useV4ButtonStyle ? (
          <style>
            {`
            .buttonAnimate {
              position: relative;
              display: inline-block;
              background-image: url('${backgroundImage}');
              background-size: cover;
              background-position: 50% 50%;
              overflow: hidden;
              box-shadow: inset 0 4px 16px rgba(255, 255, 255, 0.20), 0 0 2px 1px rgba(255, 255, 255, 0.15);
            }`}
          </style>
        ) : (
          <style>
            {`
          @keyframes randomBackground {
            0% { background-position: 50% 50%; }
            25% { background-position: 30% 70%; }
            50% { background-position: 70% 30%; }
            75% { background-position: 40% 60%; }
            100% { background-position: 50% 50%; }
          }

          .buttonAnimate {
            position: relative;
            display: inline-block;
            background-image: url('${backgroundImage}');
            background-size: cover;
            background-position: 50% 50%;
            transition: background 1s ease-in-out;
            overflow: hidden;
          }

          .buttonAnimate::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://cdn-o.suno.com/grain.webp');
            background-size: cover;
            background-repeat: repeat;
            opacity: 0.5;
            z-index: 1;
            pointer-events: none;
          }

          .buttonAnimate:hover {
            animation: randomBackground ${
              isDefaultBackground ? '3s' : '160s'
            } linear infinite;
          }
          `}
          </style>
        ))}
      <button
        style={extraStyles}
        aria-label={label}
        onClick={onClick}
        className={twMerge(
          `p-4 font-sans text-[16px] font-medium text-white ${
            borderRadius || 'rounded-full'
          } buttonAnimate shadow-lg transition duration-300 ease-in-out ${
            fullWidth ? 'w-full' : ''
          } ${
            isDisabled ? 'cursor-not-allowed opacity-50' : 'hover:opacity-90'
          } items-center justify-center`,
          extraClasses || ''
        )}
        disabled={isDisabled}
      >
        <div className='flex h-full w-full items-center justify-center'>
          {isLoading ? (
            <span className='mr-2'>
              <SpinnerSVG />
            </span>
          ) : (
            icon && (
              <span className={iconExtraClasses || (!!text ? 'mr-2' : '')}>
                {icon}
              </span>
            )
          )}
          <span className={textExtraClasses}>{text}</span>
        </div>
      </button>
    </>
  );
};

export default AuraButton;