import React from 'react';
import {
    TouchableHighlight,
    StyleSheet,
    Text,
} from 'react-native';
import Colors from 'src/constants/colors';
import TextStyles from '../styles/TextStyles';
import AppController from 'src/controllers';

export interface ButtonProps {
    style?: any;
    onPress?: () => any | Promise<any>;
    disabled?: boolean;
    title?: string;
    isTransparent?: boolean;
    titleStyles?: any;
    withBorder?: boolean;
    underlayColor?: string;
    buttonForm?: boolean;
}

export default class Button extends React.Component<ButtonProps> {
    private _mounted = true;

    private _onPressHandler = async () => {
        const { onPress } = this.props;

        if (onPress) {
            try {
                await onPress();
            } catch (err) {
                AppController.captureError(err);
            }
        }
    }

    componentWillUnmount() {
        this._mounted = false;
    }

    render() {
        const { disabled, title, style, titleStyles, withBorder, underlayColor, isTransparent, buttonForm } = this.props;
        const btnUnderlayColor = () => {
            if (isTransparent) {
                return Colors.borderColor;
            }
            if (buttonForm) {
                return Colors.button.buttonForm.underlay;
            }
            return Colors.button.defaultUnderlayColor;
        };

        return (
            <TouchableHighlight
                style={[ styles.button, disabled && styles.disabledButton, withBorder && styles.withBorder, isTransparent && styles.buttonTransparent, buttonForm && styles.buttonForm, style ]}
                onPress={this._onPressHandler}
                underlayColor={underlayColor ? underlayColor : btnUnderlayColor()}
                activeOpacity={1}
                disabled={disabled}
            >
                { title
                    ? <Text style={[TextStyles.btnTitle, disabled && styles.disabledText, isTransparent ? { color: Colors.button.transparentText } : {}, buttonForm && styles.buttonFormText, titleStyles]}>
                        {title}
                    </Text>
                    : <>{this.props.children}</>
                }
            </TouchableHighlight>
        );
    }
}

const styles = StyleSheet.create({
    button: {
        width: '100%',
        height: 65,
        maxHeight: 65,
        borderRadius: 5,
        backgroundColor: Colors.button.defaultBg,
        justifyContent: 'center',
        alignItems: 'center',
        position: 'relative',
        borderWidth: 0,
        borderColor: Colors.button.defaultBorder,
        flexShrink: 0,
    },
    whiteTitle: {
        color: '#fff',
    },
    disabledButton: {
        borderColor: Colors.button.disabledBorder,
        backgroundColor: Colors.button.disabledBg,
    },
    disabledText: {
        color: Colors.button.disabledText,
    },
    withBorder: {
        borderWidth: 1,
    },
    buttonTransparent: {
        borderColor: Colors.borderColor,
        backgroundColor: 'transparent',
    },
    buttonForm: {
        backgroundColor: Colors.button.buttonForm.bg,
        borderColor: Colors.button.buttonForm.border,
    },
    buttonFormText: {
        color: Colors.button.buttonForm.text,
    },
});