import React, { PureComponent } from 'react';
import { Image, Text, TouchableHighlight, View } from 'react-native';
import { darken } from '../lib/color';
import { border, palette } from '../styles/variables';
import { style as S, stylesSize, stylesTextSize } from '../styles/Button';
import { Loading } from './Loading';
const DEFAULT_TINT_PERC = 15;
export class Button extends PureComponent {
    constructor() {
        super(...arguments);
        this.state = {
            palette: this.props.palette || palette
        };
        this.renderButtonInner = () => {
            const { loading, icon, iconStyle, title, titleStyle, viewStyle, size = 'medium', color = 'primary', light, link } = this.props;
            const { palette } = this.state;
            const onColor = 'on' + color.charAt(0).toUpperCase() + color.slice(1);
            if (loading) {
                return <Loading />;
            }
            else {
                return (<View style={[S.buttonView, viewStyle]}>
          {icon && <Image style={[S.icon, iconStyle]} source={icon}/>}
          <Text style={[
                    S.text,
                    { color: light || link ? palette[color] : palette[onColor] },
                    stylesTextSize[size],
                    titleStyle
                ]}>
            {title}
          </Text>
        </View>);
            }
        };
    }
    render() {
        const { title, style = {}, onPress, onLongPress, underlayColor, full, accessibilityLabel, hitSlop, size = 'medium', color = 'primary', light, link, disabled } = this.props;
        const { palette } = this.state;
        return (<TouchableHighlight accessibilityLabel={accessibilityLabel || title} onPress={onPress} onLongPress={onLongPress} underlayColor={underlayColor || darken(palette[color], DEFAULT_TINT_PERC)} disabled={disabled} hitSlop={hitSlop} style={[
            S.container,
            {
                backgroundColor: light || link ? 'transparent' : palette[color],
                borderColor: light ? palette[color] : undefined,
                borderWidth: light ? border.width : 0
            },
            stylesSize[size],
            full && S.full,
            style
        ]}>
        <View style={S.buttonInner}>
          {this.renderButtonInner()}
        </View>
      </TouchableHighlight>);
    }
}
//# sourceMappingURL=Button.js.map