import { StyleProp, Text, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native';
import { tw } from '../../core/tailwind';

interface Props {
  children?: string | React.ReactNode;
  icon?: React.ReactNode;

  type?: 'primary' | 'secondary';
  rounded?: boolean;
  bordered?: boolean;
  outlined?: boolean;
  dark?: boolean;
  dense?: boolean;
  disabled?: boolean;
  style?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
  onPress?: () => void;
}

export function Button({
  children,
  icon,
  type = 'primary',
  rounded = false,
  bordered = false,
  style,
  titleStyle,
  outlined = false,
  dark = true,
  dense = false,
  disabled = false,
  onPress,
}: Props) {
  const containerStyle = tw.style('flex-row px-4 justify-center items-center rounded-md', {
    'p-4': !dense,
    'bg-primary': type === 'primary' && !outlined,
    'bg-gray-400': type === 'secondary' && !outlined,
    'bg-[#999797]': disabled,
    // If rounded is passed, use a full border radius
    'rounded-full': rounded,
    // If rounded is not passed, stil make the button rounded (but with a smaller border radius)
    'rounded-lg': !rounded,
    'border border-primary': outlined,
    'border border-light-200': bordered && type === 'secondary',
  });

  const textStyle = tw.style('font-medium text-center', {
    'text-xl': !dense,
    // Display DARK text if we're in light mode (i.e. NOT dark)
    'text-dark': !dark || disabled,
    // Display LIGHT text if we're in dark mode (i.e. because the color should contrast black / darks)
    'text-light': dark && !disabled,
    // Display PRIMARY color if we're in outlined mode and NOT in dark mode
    'text-primary': !dark && outlined,
  });

  return (
    <TouchableOpacity onPress={onPress} style={[containerStyle, style]} disabled={disabled}>
      {icon ? <View style={tw.style({ 'mr-2': Boolean(children) })}>{icon}</View> : null}
      {children ? <Text style={[textStyle, titleStyle]}>{children}</Text> : null}
    </TouchableOpacity>
  );
}