import React, { PureComponent } from 'react';
import { Image, Text, TouchableOpacity, View } from 'react-native';
import { style as S } from '../styles/Swatches';
export class Swatch extends PureComponent {
    _renderTouchable(style, child) {
        const { disabled, onSelect } = this.props;
        return (<TouchableOpacity style={style} onPress={onSelect.bind(this, this.props)} disabled={disabled}>
        {child}
      </TouchableOpacity>);
    }
    _renderColor() {
        const { color, selected, colorContainerStyle, selectedColorContainerStyle, disabledColorContainerStyle, colorStyle, selectedColorStyle, disabledColorStyle, disabled } = this.props;
        const style = [
            [S.colorContainerItem, colorContainerStyle],
            selected && [S.selectedColorContainerItem, selectedColorContainerStyle],
            disabled && disabledColorContainerStyle
        ];
        return this._renderTouchable(style, (<View style={[
            S.colorItem,
            colorStyle,
            selected ? selectedColorStyle : null,
            disabled ? disabledColorStyle : null,
            { backgroundColor: color }
        ]}/>));
    }
    _renderImage() {
        const { image, selected, imageContainerStyle, selectedImageContainerStyle, disabledImageContainerStyle, imageStyle, selectedImageStyle, disabledImageStyle, disabled } = this.props;
        if (!image) {
            return null;
        }
        const style = [
            [S.imageContainerItem, imageContainerStyle],
            selected && [S.selectedImageContainerItem, selectedImageContainerStyle],
            disabled && disabledImageContainerStyle
        ];
        return this._renderTouchable(style, (<Image style={[
            S.imageItem,
            selected ? S.selectedImageItem : [],
            imageStyle,
            selected ? selectedImageStyle : [],
            disabled ? disabledImageStyle : []
        ]} source={image}/>));
    }
    _renderText() {
        const { value, selected, textContainerStyle, selectedTextContainerStyle, disabledTextContainerStyle, textStyle, selectedTextStyle, disabledTextStyle, disabled, name } = this.props;
        const style = [
            [S.textContainerItem, textContainerStyle],
            selected && [S.selectedTextContainerItem, selectedTextContainerStyle],
            disabled && disabledTextContainerStyle
        ];
        return this._renderTouchable(style, (<Text style={[
            S.textItem,
            textStyle,
            selected ? selectedTextStyle : [],
            disabled ? disabledTextStyle : []
        ]}>
          {name || value}
        </Text>));
    }
    render() {
        const { color, image, value, render } = this.props;
        if (render) {
            return render(this.props);
        }
        else if (color) {
            return this._renderColor();
        }
        else if (image) {
            return this._renderImage();
        }
        else if (value) {
            return this._renderText();
        }
        else {
            return null;
        }
    }
}
//# sourceMappingURL=Swatch.js.map