import { type ParentProps, type JSX, splitProps } from 'solid-js';
import { Dynamic } from 'solid-js/web';
import './Buttons.css';

interface ButtonProps extends ParentProps {
  variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'whatsapp' | 'link';
  size?: 'sm' | 'md' | 'lg';
  fullWidth?: boolean;
  isLoading?: boolean;
  href?: string;
  type?: 'button' | 'submit' | 'reset';
  disabled?: boolean;
  class?: string;
  onClick?: (e: MouseEvent) => void;
  [x: string]: unknown; // для дополнительных атрибутов
}

export const Button = (props: ButtonProps) => {
  const [local, others] = splitProps(props, [
    'variant', 'size', 'fullWidth', 'isLoading', 'href', 'type', 'disabled', 'class', 'onClick', 'children'
  ]);

  // Значения по умолчанию
  const variant = local.variant ?? 'primary';
  const size = local.size ?? 'md';
  const fullWidth = local.fullWidth ?? false;
  const disabledValue = local.disabled ?? false;
  const isLoadingValue = local.isLoading ?? false;
  const href = local.href;
  const type = local.type ?? 'button';
  const onClick = local.onClick;
  const className = local.class;

  // Классы для разных состояний и вариантов
  const variantClasses = {
    primary: 'bg-amber-600 hover:bg-amber-700 text-white focus:ring-amber-500',
    secondary: 'bg-gray-600 hover:bg-gray-700 text-white focus:ring-gray-500',
    danger: 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-500',
    success: 'bg-green-600 hover:bg-green-700 text-white focus:ring-green-500',
    warning: 'bg-yellow-600 hover:bg-yellow-700 text-white focus:ring-yellow-500',
    whatsapp: 'bg-green-500 hover:bg-green-600 text-white focus:ring-green-400',
    link: 'text-blue-600 hover:text-blue-800 underline focus:ring-blue-500 bg-transparent shadow-none'
  };

  const sizeClasses = {
    sm: 'px-3 py-1.5 text-sm rounded-md',
    md: 'px-5 py-2.5 text-base rounded-lg',
    lg: 'px-6 py-3 text-lg rounded-lg'
  };

  const isInactive = disabledValue || isLoadingValue;

  const baseClasses = [
    'relative inline-flex items-center justify-center gap-2',
    'font-semibold shadow-md transition-all duration-200',
    'focus:outline-none focus:ring-2 focus:ring-offset-2',
    sizeClasses[size],
    variantClasses[variant],
    fullWidth ? 'w-full' : '',
    isInactive ? 'opacity-60 cursor-not-allowed' : 'hover:shadow-lg cursor-pointer',
    className
  ].filter(Boolean).join(' ');

  // Обработка клика
  const handleClick = (e: MouseEvent) => {
    if (onClick && !isInactive) {
      onClick(e);
    }
  };

  // Если есть href и не активна, возвращаем ссылку, иначе кнопку
  if (href && !isInactive) {
    return (
      <Dynamic
        component="a"
        href={href}
        class={baseClasses}
        onClick={handleClick}
        {...others}
      >
        {local.children}
      </Dynamic>
    );
  } else {
    return (
      <Dynamic
        component="button"
        type={href ? 'button' : type}
        class={baseClasses}
        disabled={isInactive}
        onClick={handleClick}
        {...others}
      >
        <span classList={{ 'flex items-center justify-center gap-2': true, 'opacity-0': isLoadingValue }}>
          {local.children}
        </span>
        {isLoadingValue && (
          <span class="absolute inset-0 flex items-center justify-center">
            <div class="loader"></div>
          </span>
        )}
      </Dynamic>
    );
  }
};

export { SolidModal } from './SolidModal';