import React from 'react';
import Styled from 'styled-components/native';
import Theme from '~/Themes';
import Icon from '~/Components/UIControls/Icon';
import { ActivityIndicator } from 'react-native';

const Container = Styled.View`
    padding: 3px;
    align-self: auto;
`;
const StyleButton = Styled.TouchableOpacity`
    flex-direction: row;
    width: 100%;
    height: 50px;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    border: 0px;
    background-color: ${Theme.COLORS.PRIMARY};
`;
const Label = Styled.Text`
    color: #FFFFFF;
    font-family: ${Theme.Fonts.Regular};
    font-size: 20px;
    letter-spacing: -1.2;
`;

const defaultOnPress = () => {};
const Button = ({children, loading = false,
    iconFamily = "", iconName = "", iconSize = 18, color = "primary", textColor = "white", iconColor = "white", 
    textStyle = {}, buttonStyle = {}, style = {}, onPress = defaultOnPress}) => {

    const colorValue = Theme.getColorNameToColor(color);
    const textColorValue = Theme.getColorNameToColor(textColor);
    const iconColorValue = Theme.getColorNameToColor(iconColor);

    return (
        <Container style={[style]}>
            <StyleButton style={[{backgroundColor:colorValue}, buttonStyle]} onPress={onPress}>
                { !loading && iconFamily != "" && iconName != "" && <Icon iconFamily={iconFamily} iconName={iconName} size={iconSize} color={iconColorValue} style={{ marginRight: 5 }} /> }
                { !loading && <Label style={{ color: textColorValue, ...textStyle }}>{children}</Label>}
                { loading && <ActivityIndicator size="small" color={iconColor} /> }
            </StyleButton>
        </Container>
    );
};

export default Button;