// tslint:disable:no-empty
import React from 'react';
import {ActivityIndicator, StyleProp, StyleSheet, Text, TouchableHighlight, View, ViewStyle} from 'react-native';
import {WithTheme, WithThemeStyles} from '../style';
import {ButtonPropsType} from './PropsType';
import buttonStyles, {ButtonStyles} from './style';

export interface ButtonProps extends ButtonPropsType, WithThemeStyles<ButtonStyles> {
    activeStyle?: StyleProp<ViewStyle>;
    style?: StyleProp<ViewStyle>;
    onPress?: (_?: any) => void;
}

export default class Button extends React.Component<ButtonProps, any> {
    static defaultProps = {
        pressIn: false,
        disabled: false,
        loading: false,

        onPress: (_?: any) => {},
    };

    constructor(props: ButtonProps) {
        super(props);
        this.state = {
            pressIn: false,
            touchIt: false,
        };
    }

    render() {
        // TODO: replace `TouchableHighlight` with `TouchableWithoutFeedback` in version 1.1.0
        // for using setNativeProps to improve performance
        const {size = 'large', type = 'default', disabled, activeStyle, onPress, style, styles, loading, ...restProps} = this.props;
        return (
            <WithTheme themeStyles={buttonStyles} styles={styles}>
                {(_styles) => {
                    const textStyle = [
                        _styles[`${size}RawText`],
                        _styles[`${type}RawText`],
                        disabled && _styles[`${type}DisabledRawText`],
                        this.state.pressIn && _styles[`${type}HighlightText`],
                    ];

                    const wrapperStyle = [
                        _styles.wrapperStyle,
                        _styles[`${size}Raw`],
                        _styles[`${type}Raw`],
                        disabled && _styles[`${type}DisabledRaw`],
                        this.state.pressIn && activeStyle && _styles[`${type}Highlight`],
                        activeStyle && this.state.touchIt && activeStyle,
                        style,
                    ];

                    const underlayColor = (StyleSheet.flatten(activeStyle ? activeStyle : _styles[`${type}Highlight`]) as any).backgroundColor;

                    const indicatorColor = (StyleSheet.flatten(this.state.pressIn ? _styles[`${type}HighlightText`] : _styles[`${type}RawText`]) as any).color;

                    return (
                        <TouchableHighlight
                            activeOpacity={0.9}
                            {...restProps}
                            style={wrapperStyle}
                            disabled={disabled}
                            underlayColor={underlayColor}
                            onPress={(e?: any) => onPress && onPress(e)}>
                            <View style={_styles.container}>
                                {loading ? (
                                    // tslint:disable-next-line:jsx-no-multiline-js
                                    <ActivityIndicator style={_styles.indicator} animating color={indicatorColor} size="small" />
                                ) : null}
                                <Text style={textStyle}>{this.props.children}</Text>
                            </View>
                        </TouchableHighlight>
                    );
                }}
            </WithTheme>
        );
    }
}