'use strict';

import { createElement, Component, PropTypes } from 'rax';
import { View, Text, Image, ThemeProvider } from 'weex-nuke';
import stylesProvider from './styles';
import ICONMAP from './icons';

const { connectStyle } = ThemeProvider;

class CustomFeedback extends Component {

  getMessage() {
    const { message } = this.props;
    const styles = this.props.themeStyle;
    let dom = null;
    if (message && typeof (message) === 'string') {
      dom = <Text style={styles.message}>{message}</Text>;
    } else if (message) {
      dom = message;
    }
    return (dom ? <View style={styles.messageWrap}>{dom}</View> : null);
  }
  render() {
    const styles = this.props.themeStyle;
    const { style = {}, type, title } = this.props;
    return (
      <View style={[styles.feedback, styles[`fb-${type}`], style]}>
        <Image
          style={[styles.icon, styles[`icon-${type}`]]}
          source={{ uri: ICONMAP[type] }}
        />
        <View style={styles.content}>

          <Text style={[styles.title, styles[`title-${type}`]]}>{title}</Text>

          {this.getMessage()}
        </View>
      </View>
    );
  }
}
CustomFeedback.propTypes = {
  type: PropTypes.oneOf(['success', 'info', 'warning', 'error']),
  title: PropTypes.string,
  message: PropTypes.string,
};

CustomFeedback.defaultProps = {
  type: 'success',
  title: null,
  message: null,
};
CustomFeedback.displayName = 'CustomFeedback';

const StyledCustomFeedback = connectStyle(stylesProvider)(CustomFeedback);

export default StyledCustomFeedback;