var React = require('react')
var r = require('r-dom')

module.exports = React.createClass({

  propTypes: {
    label: React.PropTypes.string,
    icon: React.PropTypes.node,
    onIconClick: React.PropTypes.func
  },

  render: function () {
    var icon = this.props.icon
    var label = this.props.label

    return r.div({ className: 'tag-active' }, [
      r.span({ className: 'tag-icon' }, icon),
      r.span({ className: 'tag-label' }, [
        r.a({ className: 'tag-label-a'}, label)
      ])
    ])
  }
})

var React = require('react')
var r = require('r-dom')
var extend = require('xtend')
var vars = require('ui/vars')

var style = {
  tagIcon: {
    cursor: 'pointer',
    textAlign: 'center',
    width: '100%',
    color: 'inherit',
    width: '2.57142em',
    height: '100%',
    backgroundColor: 'rgba(0,0,0,0)',
    borderRadius: '.2857rem 0 0 .2857rem',
    lineHeight: 1,
    boxShadow: '-1px 0 0 0 transparent inset',
    top: 0,
    left: 0,
    backgroundColor: vars.overlay.darken,
    paddingTop: 9,
    paddingBottom: 12,
    paddingRight: vars.gutterWidth/2,
    paddingLeft: vars.gutterWidth/2,
  },
  index: {
    display: 'inline-block',
    minHeight: '1em',
    outline: 0,
    border: 'none',
    verticalAlign: 'baseline',
    fontFamily: 'Lato,Helvetica Neue,Arial,Helvetica,sans-serif',
    margin: '0 .25em 0 0',
    paddingRight: vars.gutterWidth/2,
    paddingTop: vars.gutterWidth/4,
    paddingBottom: vars.gutterWidth/4,
    textTransform: 'none',
    color: 'inherit',
    textShadow: 'none',
    fontSize: vars.fontSize.button.medium,
    fontWeight: 700,
    lineHeight: 1,
    fontStyle: 'normal',
    textAlign: 'center',
    textDecoration: 'none',
    backgroundImage: 'none',
    borderRadius: '.2857rem',
    boxShadow: '0 0 0 1px transparent inset,0 0 0 0 rgba(39,41,43,.15)inset',
    '-webkit-user-select': 'none',
  },
  label: {
    color: 'inherit',
    textDecoration: 'none',
    marginLeft: vars.gutterWidth/2
  }
}

module.exports = React.createClass({

  propTypes: {
    color: React.PropTypes.string,
    icon: React.PropTypes.node,
    label: React.PropTypes.string,
    onIconClick: React.PropTypes.func,
  },

  render: function () {
    var icon = this.props.icon
    var label = this.props.label
    var color = { backgroundColor: this.props.color }

    return r.div({ className: 'tag-active', style: extend(style.index, color) }, [
      r.i({ className: 'tag-icon', onClick: this.props.onIconClick, style: style.tagIcon }, icon),
      r.span({ className: 'tag-label', style: style.label }, [
        r.span({ className: 'tag-label-a'}, label)
      ])
    ])
  }
})

add tag component