import { ActivityIndicator } from 'react-native';

import { cn } from '../../lib/cn';
import { Button as UIButton } from '../../ui/button';
import { Text } from '../../ui/text';

import type { ButtonProps, ButtonSize, ButtonVariant } from './Button.types';

const containerVariant: Record<ButtonVariant, string> = {
  primary: 'bg-primary active:bg-primary-700',
  secondary: 'bg-secondary active:bg-secondary-600',
  outline: 'border border-primary bg-transparent active:bg-primary-50',
  ghost: 'bg-transparent active:bg-content2',
  danger: 'bg-danger active:bg-danger-600',
  success: 'bg-success active:bg-success-600',
  link: 'bg-transparent',
};

const textVariant: Record<ButtonVariant, string> = {
  primary: 'text-primary-foreground',
  secondary: 'text-secondary-foreground',
  outline: 'text-primary',
  ghost: 'text-primary',
  danger: 'text-white',
  success: 'text-success-foreground',
  link: 'text-primary underline',
};

const sizeClass: Record<ButtonSize, string> = {
  sm: 'h-10 px-4',
  md: 'h-12 px-5',
  lg: 'h-14 px-6',
};

const spinnerColor: Record<ButtonVariant, string> = {
  primary: '#ffffff',
  secondary: '#ffffff',
  outline: '#1d4236',
  ghost: '#1d4236',
  danger: '#ffffff',
  success: '#ffffff',
  link: '#1d4236',
};

export function Button({
  children,
  variant = 'primary',
  size = 'md',
  loading = false,
  disabled = false,
  fullWidth = false,
  className,
  textClassName,
  ...props
}: ButtonProps) {
  const isDisabled = disabled || loading;

  return (
    <UIButton
      role="button"
      accessibilityRole="button"
      accessibilityState={{ disabled: isDisabled, busy: loading }}
      disabled={isDisabled}
      className={cn(
        'items-center justify-center rounded-[10px]',
        containerVariant[variant],
        sizeClass[size],
        fullWidth && 'w-full',
        isDisabled && 'opacity-50',
        className,
      )}
      {...props}
    >
      {loading ? (
        <ActivityIndicator size="small" color={spinnerColor[variant]} />
      ) : typeof children === 'string' ? (
        <Text
          className={cn(
            'text-buttons text-[15px] font-semibold',
            textVariant[variant],
            textClassName,
          )}
        >
          {children}
        </Text>
      ) : (
        children
      )}
    </UIButton>
  );
}