import {View} from 'react-native';
import {
  Image,
  ImageSourcePropType,
  ImageStyle,
  StyleProp,
  ViewStyle,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {MyIcon} from './MyIcon';
import {useSelector} from 'react-redux';
import {RootState} from '@redux/store';
import {Spinner, Text} from '@gluestack-ui/themed';
import {MyTouchableOpacity} from './MyTouchableOpacity';
import {TouchableOpacityProps} from 'react-native';

interface MyImageButtonProps extends TouchableOpacityProps {
  image: ImageSourcePropType;
  imageStyle?: StyleProp<ImageStyle>;
  text: string;
}

export function MyImageButton({
  image,
  imageStyle,
  text,
  ...rest
}: MyImageButtonProps) {
  const currentTheme = useSelector(
    (state: RootState) => state.nonSaveVariables.theme.colors,
  );

  return (
    <MyTouchableOpacity
      style={{
        backgroundColor: currentTheme.backgroundDark300,
        alignItems: 'center',
        padding: 10,
        flexDirection: 'row',
        borderRadius: 10,
      }}
      {...rest}>
      <Image source={image} style={imageStyle} />
      <Text
        bold
        size="lg"
        style={{
          flex: 1,
          textAlign: 'center',
        }}>
        {text}
      </Text>
    </MyTouchableOpacity>
  );
}

interface MyButtonProps {
  style?: StyleProp<ViewStyle>;
  type: 'primary' | 'secondary';
  text: string;
  onPress?: () => void;
  disabled?: boolean;
  isLoading?: boolean;
}

export function MyButton({
  style,
  type,
  text,
  onPress,
  disabled,
  isLoading,
  ...rest
}: MyButtonProps) {
  const currentTheme = useSelector(
    (state: RootState) => state.nonSaveVariables.theme,
  );

  const ButtonText = () => (
    <View style={{flexDirection: 'row', gap: 10, alignItems: 'center'}}>
      {isLoading && <Spinner color="$primary100" />}

      <Text color="$white" bold size="lg">
        {text}
      </Text>
    </View>
  );

  return (
    <MyTouchableOpacity
      style={[
        style,
        {
          borderRadius: 10,
        },
      ]}
      disabled={disabled || isLoading}
      onPress={onPress}
      {...rest}>
      {type === 'primary' ? (
        <LinearGradient
          colors={[
            currentTheme.colors.secondary200,
            currentTheme.colors.primary400,
          ]}
          start={{x: 0, y: 1}}
          end={{x: 1, y: 0}}
          style={{
            alignItems: 'center',
            padding: 10,
            borderRadius: 10,
            opacity: disabled ? currentTheme.opacity[60] : 1,
          }}>
          <ButtonText />
        </LinearGradient>
      ) : (
        <View
          style={{
            backgroundColor: currentTheme.colors.backgroundDark200,
            alignItems: 'center',
            padding: 10,
            borderRadius: 10,
            opacity: disabled ? currentTheme.opacity[60] : 1,
          }}>
          <ButtonText />
        </View>
      )}
    </MyTouchableOpacity>
  );
}

interface MyIconButtonProps {
  onPress?: () => void;
  MyIconProps: {
    name: string;
    color?: string;
    size?: number;
  };
}

export function MyIconButton({onPress, MyIconProps}: MyIconButtonProps) {
  return (
    <MyTouchableOpacity onPress={onPress}>
      <MyIcon
        name={MyIconProps.name}
        size={MyIconProps.size}
        color={MyIconProps.color}
      />
    </MyTouchableOpacity>
  );
}
