/** @jsx createElement */

/**
 * Copyright (c) 2015-present, Alibaba Group Holding Limited.
 * All rights reserved.
 *
 */

'use strict';

import { Component, createElement, PropTypes, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import ThemeProvider from 'nuke-theme-provider';
import stylesProvider from '../styles';

const { connectStyle } = ThemeProvider;

class PickerItem extends Component {
  static contextTypes = {
    __column__: PropTypes.bool,
    selectedValue: PropTypes.any,
  };

  render() {
    const { __column__, selectedValue } = this.context;
    const styles = this.props.themeStyle;
    const {
      value,
      className,
      children,
      style = {},
      prefix = this.defaultPrefix,
    } = this.props;

    const klsStyle = Object.assign(
      {},
      styles['picker-item'],
      __column__ && value === selectedValue ? styles['picker-item'] : {}
    );

    return (
      <View x="picker-item" style={[klsStyle, style]}>
        <Text style={styles['picker-item-text']}>{value}</Text>
      </View>
    );
  }
}
PickerItem.displayName = 'Picker';

const StyledPickerItem = connectStyle(stylesProvider)(PickerItem);

export default StyledPickerItem;