import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'

import WidgetPieceWrapper from '../../WidgetPieceWrapper'
import DeleteIcon from 'material-ui/svg-icons/navigation/cancel'
import Chip from 'material-ui/Chip'
import TextField from 'material-ui-next/TextField'
import appTheme, {
  dashboardTransparentBackground,
  widgetEditButtonInactive,
  widgetEditButtonHover
} from 'theme/default'

class Note extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      showDeleteButton: false
    }

    this.noteChangedTimer = 0
    this.hoverTimer = 0
  }

  componentWillUnmount () {
    if (this.hoverTimer) {
      clearTimeout(this.hoverTimer)
    }
    if (this.noteChangedTimer) {
      clearTimeout(this.noteChangedTimer)
    }
  }

  removeStickyNote () {
    this.props.removeStickyNote(this.props.index)
  }

  onMouseHoverChange (isHovering) {
    if (this.hoverTimer) {
      clearTimeout(this.hoverTimer)
    }
    if (isHovering) {
      this.hoverTimer = setTimeout(() => {
        this.setState({
          showDeleteButton: true
        })
      }, 500)
    } else {
      this.setState({
        showDeleteButton: false
      })
    }
  }

  onNoteClick () {
    this.noteInput.focus()
  }

  onNoteChanged (event) {
    if (this.noteChangedTimer) {
      clearTimeout(this.noteChangedTimer)
    }
    const value = event.target.value
    this.noteChangedTimer = setTimeout(() => {
      if (this.props.onNoteUpdated) {
        this.props.onNoteUpdated(value, this.props.index)
      }
    }, 500)
  }

  getNoteDate () {
    var noteDateFormat = 'MMM D'
    var now = moment()
    var noteDate = moment(this.props.note.created)
    if (now.date() === noteDate.date()) {
      noteDateFormat = 'h:mm A'
    }
    return noteDate.format(noteDateFormat)
  }

  render () {
    const { note } = this.props

    const defaultPaper = {
      margin: 5,
      backgroundColor: dashboardTransparentBackground,
      borderRadius: 3,
      borderLeftStyle: 'solid',
      borderLeftColor: note.color,
      borderLeftWidth: 5
    }
    const noteContent = {
      padding: '0 15px 5px 15px'
    }
    const chip = {
      style: {
        margin: 5
      },
      labelColor: appTheme.textField.underlineColor,
      backgroundColor: 'rgba(0,0,0,0)'
    }

    const otherTransitions = 'fill 0.15s ease-in'
    const deleteIconStyle = {
      cursor: 'pointer',
      float: 'right',
      margin: '5px 5px 0px 0px',
      opacity: this.state.showDeleteButton ? 1 : 0,
      transition: this.state.showDeleteButton
        ? `opacity 0.2s ease-in 0.5s, ${otherTransitions}`
        : `opacity 0.1s ease-in, ${otherTransitions}`,
      pointerEvents: this.state.showDeleteButton ? 'all' : 'none',
      display: 'inline-block'
    }
    var noteDate = this.getNoteDate()

    return (
      <WidgetPieceWrapper>
        <div
          key={'note_' + this.props.index}
          style={defaultPaper}
          onClick={this.onNoteClick.bind(this)}
          onMouseEnter={this.onMouseHoverChange.bind(this, true)}
          onMouseLeave={this.onMouseHoverChange.bind(this, false)}
        >
          <div style={{display: 'inline-block'}}>
            <Chip
              labelColor={chip.labelColor}
              backgroundColor={chip.backgroundColor}
              style={chip.style}>
              {noteDate}
            </Chip>
          </div>
          <DeleteIcon
            color={widgetEditButtonInactive}
            hoverColor={widgetEditButtonHover}
            style={deleteIconStyle}
            onClick={this.removeStickyNote.bind(this)} />
          <div style={noteContent}>
            <TextField
              id={'note-content-' + this.props.index}
              InputProps={{
                disableUnderline: true,
                style: {
                  color: '#FFF',
                  fontSize: 14,
                  fontFamily: appTheme.fontFamily
                }
              }}
              multiline
              fullWidth
              placeholder={'Your note here...'}
              defaultValue={note.content ? note.content : ''}
              onChange={this.onNoteChanged.bind(this)}
              inputRef={(note) => { this.noteInput = note }}
            />
          </div>
        </div>
      </WidgetPieceWrapper>
    )
  }
}

Note.propTypes = {
  index: PropTypes.number.isRequired,
  removeStickyNote: PropTypes.func.isRequired,
  note: PropTypes.object.isRequired,
  onNoteUpdated: PropTypes.func
}

export default Note

@@ -422,16 +422,529 @@
 fault'%0A%0A
+import %7B withStyles %7D from 'material-ui-next/styles'%0A%0A// Custom styling for placeholder text.%0Aconst placeholder = %7B%0A  color: appTheme.textField.underlineColor%0A%7D%0A%0A// https://github.com/callemall/material-ui/blob/86dbd4986c6fdc1f32c088abb3b73d25974272e8/src/Input/Input.js#L117-L120%0Aconst styles = theme =%3E (%7B%0A  textFieldInput: %7B%0A    '&::-webkit-input-placeholder': placeholder,%0A    '&::-moz-placeholder': placeholder,%0A    '&:-ms-input-placeholder': placeholder,%0A    '&::-ms-input-placeholder': placeholder%0A  %7D%0A%7D)%0A%0A
 class No
@@ -2377,16 +2377,25 @@
 t %7B note
+, classes
  %7D = thi
@@ -4469,16 +4469,110 @@
 tFamily%0A
+                %7D,%0A                classes: %7B%0A                  input: classes.textFieldInput%0A
         
@@ -5136,28 +5136,88 @@
 func
-%0A%7D%0A%0Aexport default 
+,%0A  classes: PropTypes.object.isRequired%0A%7D%0A%0Aexport default withStyles(styles)(
 Note
+)
 %0A

Customize note placeholder text style.