content: /* eslint no-useless-escape: 0 */
  
  import React from 'react'
  import PropTypes from 'prop-types'
  
  import EditWidgetChip from 'js/components/Widget/EditWidgetChip'
  import TextField from 'material-ui/TextField'
  import appTheme, { widgetEditButtonHover } from 'js/theme/default'
  
  class AddBookmarkForm extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        open: false,
        nameRequiredError: false,
        urlRequiredError: false,
      }
    }
  
    _handleKeyPress(e) {
      if (e.key === 'Enter') {
        if (!e.shiftKey) {
          e.stopPropagation()
          e.preventDefault()
          this.create()
        }
      }
    }
  
    openForm() {
      this.setState(
        {
          open: true,
        },
        () => {
          this.focusInput()
        }
      )
    }
  
    closeForm() {
      this.setState({
        open: false,
      })
    }
  
    focusInput() {
      this.bookmarkNameTextField.focus()
    }
  
    onNameValChange() {
      const name = this.bookmarkNameTextField.input.value
      this.setState({
        nameRequiredError: !name,
      })
    }
  
    onURLValChange() {
      const url = this.bLink.input.value
      this.setState({
        urlRequiredError: !url,
      })
    }
  
    addProtocolToURLIfNeeded(url) {
      const hasProtocol = s => {
        var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
        return regexp.test(s)
      }
  
      if (!hasProtocol(url)) {
        return 'http://' + url
      }
      return url
    }
  
    create() {
      const name = this.bookmarkNameTextField.input.value
      const url = this.bLink.input.value
  
      if (!name) {
        this.setState({
          nameRequiredError: true,
        })
      }
      if (!url) {
        this.setState({
          urlRequiredError: true,
        })
      }
      if (!name || !url) {
        return
      }
  
      const link = this.addProtocolToURLIfNeeded(this.bLink.input.value)
      this.props.addBookmark(name, link)
      this.bookmarkNameTextField.input.value = ''
      this.bLink.input.value = ''
  
      this.closeForm()
    }
  
    render() {
      const textField = {
        underlineStyle: {
          borderColor: appTheme.textField.underlineColor,
        },
        underlineFocusStyle: {
          borderColor: widgetEditButtonHover,
        },
        hintStyle: {
          color: appTheme.textField.underlineColor,
          fontSize: 14,
        },
        inputStyle: {
          color: '#FFF',
          fontSize: 14,
        },
      }
  
      return (
        <EditWidgetChip
          open={this.state.open}
          widgetName={'Bookmarks'}
          onAddItemClick={this.openForm.bind(this)}
          onCancelAddItemClick={this.closeForm.bind(this)}
          onItemCreatedClick={this.create.bind(this)}
          showEditOption={this.props.showEditButton}
          onEditModeToggle={this.props.onEditModeToggle}
          editMode={this.props.editMode}
          widgetAddItemForm={
            <span
              key={'widget-add-form-elem'}
              style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                paddingBottom: 20,
              }}
            >
              <TextField
                ref={input => {
                  this.bookmarkNameTextField = input
                }}
                onKeyPress={this._handleKeyPress.bind(this)}
                hintText="Ex: Google"
                style={textField.style}
                inputStyle={textField.inputStyle}
                hintStyle={textField.hintStyle}
                underlineStyle={textField.underlineStyle}
                underlineFocusStyle={textField.underlineFocusStyle}
                onChange={this.onNameValChange.bind(this)}
                errorText={this.state.nameRequiredError ? 'Enter a name' : null}
              />
              <TextField
                ref={input => {
                  this.bLink = input
                }}
                onKeyPress={this._handleKeyPress.bind(this)}
                hintText="Ex: google.com"
                style={textField.style}
                inputStyle={textField.inputStyle}
                hintStyle={textField.hintStyle}
                underlineStyle={textField.underlineStyle}
                underlineFocusStyle={textField.underlineFocusStyle}
                onChange={this.onURLValChange.bind(this)}
                errorText={this.state.urlRequiredError ? 'Enter a URL' : null}
              />
            </span>
          }
        />
      )
    }
  }
  
  AddBookmarkForm.propTypes = {
    addBookmark: PropTypes.func.isRequired,
    onEditModeToggle: PropTypes.func.isRequired,
    editMode: PropTypes.bool.isRequired,
    showEditButton: PropTypes.bool.isRequired,
  }
  
  AddBookmarkForm.defaultProps = {
    showEditButton: true,
  }
  
  export default AddBookmarkForm
  