import React from "react";
import {ActivityIndicator, StyleSheet, TouchableOpacity} from "react-native";
import PropTypes from "prop-types";
import styles from "./styles";
import {Color} from "../../config/Color";
import Text from '../Text';


export default function Button(props) {
    const {
        style,
        styleText,
        icon,
        outline,
        full,
        round,
        loading,
        children,
        ...rest
    } = props;

    return (
        <TouchableOpacity
            {...rest}
            style={StyleSheet.flatten([
                [styles.default, {backgroundColor: Color.primaryColor}],
                outline && [
                    styles.outline,
                    {backgroundColor: Color.cardBackgroundColor, borderColor: Color.primaryColor}
                ],
                full && styles.full,
                round && styles.round,
                style
            ])}
            activeOpacity={0.9}
        >
            {icon ? icon : null}
            <Text
                style={StyleSheet.flatten([
                    styles.textDefault,
                    outline && {color: Color.primaryColor},
                    styleText
                ])}
                numberOfLines={1}
            >
                {children || "Button"}
            </Text>
            {loading ? (
                <ActivityIndicator
                    size="small"
                    color={outline ? Color.primaryColor : Color.whiteColor}
                    style={{paddingLeft: 5}}
                />
            ) : null}
        </TouchableOpacity>
    );
}

Button.propTypes = {
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    icon: PropTypes.node,
    outline: PropTypes.bool,
    full: PropTypes.bool,
    round: PropTypes.bool,
    loading: PropTypes.bool
};

Button.defaultProps = {
    style: {},
    icon: null,
    outline: false,
    full: false,
    round: false,
    loading: false
};