React = require 'react'
createClass = require 'create-react-class'
{ ENTER, SPACE } = require '../constants/keyboard'

{svg, path} = require 'react-dom-factories'

CircleX = createClass

  displayName: 'CircleX'


  getDefaultProps: ->
    {
      onClick: -> # method to handle clicks
      positionClass: null # and additionaly class to add for positioning the element
      rotateOnClick: no # whether or not to rotate into a + symbol when clicked
      collapsed: no
    }

  render: ->
    {positionClass, onClick, collapsed, rotateOnClick, tabIndex} = @props
    
    className = 'fs-circle-x'
    className += " #{positionClass}" if positionClass?
    className += ' is-collapsed' if collapsed and rotateOnClick
    
    svg {
      className: className
      onClick: @handleClick
      onKeyDown: @handleKeyDown
      tabIndex: tabIndex
      cursor: 'pointer'
      width: "14"
      height: "14"
      viewBox:"0 0 14 14"
    }, path {
      fill: "#D2D2D2" 
      d: "M7 0C3.1 0 0 3.1 0 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm3.8 9.6c.3.3.3.9 0 1.2-.2.2-.4.2-.6.2-.2 0-.4-.1-.6-.2L7 8.2l-2.6 2.6c-.1.1-.3.2-.6.2-.2 0-.4-.1-.6-.2-.3-.3-.3-.9 0-1.2L5.8 7 3.2 4.4c-.3-.3-.3-.9 0-1.2.3-.3.9-.3 1.2 0L7 5.8l2.6-2.6c.3-.3.9-.3 1.2 0 .3.3.3.9 0 1.2L8.2 7l2.6 2.6z"
    }


  handleClick: (e) -> 
    e.stopPropagation()
    @props.onClick()
    
  handleKeyDown: (e) ->
    if e.keyCode in [ENTER, SPACE]
      e.stopPropagation()
      @props.onClick()


module.exports = CircleX