import React from 'react';
import {TouchableOpacity, StyleProp, ViewStyle, TextStyle} from 'react-native';
import Text from '@components/Text';
import ActivityIndicator from '@components/ActivityIndicator';
import {useAppSelector} from '@redux/utils';
import {COLORS} from '@shared/colors';

import {styles} from './styles';

interface Props {
  buttonStyle?: StyleProp<ViewStyle>;
  onPress?: () => void;
  textStyle?: StyleProp<TextStyle>;
  text: string;
  disabled?: boolean;
  backgroundColor?: string;
  loading?: boolean;
}

// TODO: Replace with @components/Button
function CustomizedButton({
  buttonStyle,
  onPress,
  textStyle,
  text,
  disabled,
  backgroundColor,
  loading,
}: Props) {
  const color = useAppSelector(state => state.instance.color);

  return (
    <TouchableOpacity
      style={[
        styles.button,
        buttonStyle,
        {
          backgroundColor: backgroundColor
            ? backgroundColor
            : color || COLORS.MAIN_COLOR,
        },
      ]}
      onPress={onPress}
      disabled={disabled}>
      {loading ? (
        <ActivityIndicator color={COLORS.WHITE} />
      ) : (
        <Text variant="subtitle2" style={[styles.text, textStyle]}>
          {text}
        </Text>
      )}
    </TouchableOpacity>
  );
}

export default CustomizedButton;