React = require 'react'
animationMixin = require '../mixins/animation_mixin'

{button} = React.DOM

DeleteButton = React.createClass
  
  displayName: 'DeleteButton'

  mixins: [animationMixin]

  enterDuration: 150
  enterStateStart:
    left: 50
  enterStateEnd:
    left: 0
  enterEasing: 'easeOutSine'
  
  leaveDuration: 150
  leaveStateStart:
    left: 0
  leaveStateEnd:
    left: 50
  leaveEasing: 'easeOutSine'
  
  render: ->
    {handleClick} = @props
    {left} = @state

    button {
      className: 'delete-btn'
      onClick: @props.handleClick
      style:
        transform: "translate(#{left}px, 0px) translateZ(0px)"
        WebkitTransform: "translate(#{left}px, 0px) translateZ(0px)"
        msTransform: "translate(#{left}px, 0px)"
    }, t 'Delete'


module.exports = DeleteButton