import React from 'react';
import { TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native';
import Text from '@/components/common/Text';
import { COLOR_SCALES } from '@/theme/colors';
import { SHADOWS, CONSTANTS } from '@/theme';
import { FLEX } from '@/theme/mixins';
import { button } from '@/theme/typography';

const variants = {
  primary: {
    backgroundColor: COLOR_SCALES.primary[50],
    textColor: COLOR_SCALES.white.white,
    borderColor: 'transparent',
    pressedBackground: COLOR_SCALES.primary[60],
    disabledBackground: COLOR_SCALES.colorGray[30],
    disabledTextColor: COLOR_SCALES.white.white,
  },
  secondary: {
    backgroundColor: 'transparent',
    textColor: COLOR_SCALES.primary[50],
    borderColor: COLOR_SCALES.primary[50],
    pressedBackground: COLOR_SCALES.primary[10],
    disabledBackground: 'transparent',
    disabledTextColor: COLOR_SCALES.colorGray[40],
    disabledBorderColor: COLOR_SCALES.colorGray[30],
  },
  tertiary: {
    backgroundColor: COLOR_SCALES.tertiary[50],
    textColor: COLOR_SCALES.white.white,
    borderColor: 'transparent',
    pressedBackground: COLOR_SCALES.tertiary[80],
    disabledBackground: COLOR_SCALES.colorGray[30],
    disabledTextColor: COLOR_SCALES.white.white,
  },
  ghost: {
    backgroundColor: 'rgba(255, 255, 255, 0.10)',
    textColor: COLOR_SCALES.white.white,
    borderColor: COLOR_SCALES.white.white,
    pressedBackground: 'rgba(255, 255, 255, 0.15)',
    disabledBackground: 'rgba(255, 255, 255, 0.05)',
    disabledTextColor: 'rgba(255, 255, 255, 0.6)',
    disabledBorderColor: 'rgba(255, 255, 255, 0.3)',
  },
  danger: {
    backgroundColor:"#E55050",
    textColor: COLOR_SCALES.white.white,
    borderColor: 'transparent',
    pressedBackground: '#d13838',
    disabledBackground: COLOR_SCALES.colorGray[30],
    disabledTextColor: COLOR_SCALES.white.white,
  },
};

const sizes = {
  small: {
    height: 36,
    paddingHorizontal: 12,
    borderRadius: CONSTANTS.borderRadius.md,
    typography: button['M/SemiBold'],
  },
  medium: {
    height: 44,
    paddingHorizontal: 16,
    borderRadius: CONSTANTS.borderRadius.md,
    typography: button['L/SemiBold'],
  },
  large: {
    height: 54,
    paddingHorizontal: 24,
    borderRadius: CONSTANTS.borderRadius.md,
    typography: button['L/Bold'],
  },
};

/**
 * Button component with multiple variants and states
 * @param {Object} props - Component props
 * @param {string} [props.label] - Button text
 * @param {function} [props.onPress] - Action on button press
 * @param {boolean} [props.disabled=false] - Disable button
 * @param {string} [props.variant='primary'] - Button style variant
 * @param {string} [props.size='medium'] - Button size
 * @param {boolean} [props.fullWidth=false] - Button takes full width
 * @param {boolean} [props.loading=false] - Show loading indicator
 * @param {Object} [props.style] - Additional styles
 * @param {Object} [props.textStyle] - Text styles
 * @param {React.ReactNode} [props.leftIcon] - Icon to show before label
 * @param {React.ReactNode} [props.rightIcon] - Icon to show after label
 */
const Button = ({
  label,
  onPress,
  disabled = false,
  variant = 'primary',
  size = 'medium',
  fullWidth = false,
  loading = false,
  style,
  textStyle,
  leftIcon,
  rightIcon,
  ...props
}) => {
  // Tema varyant ve boyutlarına erişim
  const variantStyle = variants[variant] || variants.primary;
  const sizeStyle = sizes[size] || sizes.medium;
  
  // Buton stillerini hesaplama
  const buttonStyles = [
    styles.base,
    {
      backgroundColor: disabled 
        ? variantStyle.disabledBackground 
        : variantStyle.backgroundColor,
      height: sizeStyle.height,
      paddingHorizontal: sizeStyle.paddingHorizontal,
      borderRadius: sizeStyle.borderRadius,
      borderWidth: variantStyle.borderColor !== 'transparent' ? 1 : 0,
      borderColor: disabled && variantStyle.disabledBorderColor 
        ? variantStyle.disabledBorderColor
        : variantStyle.borderColor,
    },
    fullWidth && styles.fullWidth,
    style,
  ];

  // Metin stillerini hesaplama
  const textStyles = [
    sizeStyle.typography,
    {
      color: disabled 
        ? variantStyle.disabledTextColor 
        : variantStyle.textColor,
    },
    textStyle,
  ];

  // Loading indicator rengi
  const spinnerColor = variantStyle.textColor === COLOR_SCALES.white.white
    ? COLOR_SCALES.white.white
    : COLOR_SCALES.primary[50];

  return (
    <TouchableOpacity
      style={buttonStyles}
      onPress={onPress}
      disabled={disabled || loading}
      activeOpacity={0.8}
      {...props}
    >
      {loading ? (
        <ActivityIndicator 
          size="small" 
          color={spinnerColor} 
        />
      ) : (
        <>
          {leftIcon && <Text style={styles.iconLeft}>{leftIcon}</Text>}
          <Text style={textStyles}>{label}</Text>
          {rightIcon && <Text style={styles.iconRight}>{rightIcon}</Text>}
        </>
      )}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  base: {
    ...FLEX.row,
    ...FLEX.center,
    ...SHADOWS.button,
  },
  fullWidth: {
    width: '100%',
  },
  iconLeft: {
    marginRight: 8,
  },
  iconRight: {
    marginLeft: 8,
  },
});

export default Button;