content: import React from 'react';
  import { observer } from 'mobx-react';
  import FlatButton from 'material-ui/FlatButton';
  import TextField from 'material-ui/TextField';
  import parseDomain from 'parse-domain';
  import {red500} from 'material-ui/styles/colors';
  import DeleteForever from 'material-ui/svg-icons/action/delete';
  
  import dataActions from '../../actions/dataActions';
  import Styles from '../../../client/main.scss';
  const { twitter } = Styles;
  
  @observer
  export default class TextFieldForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value: ''
      };
      this.handleOnChange = this.handleOnChange.bind(this);
      this.handleOnKeyDown = this.handleOnKeyDown.bind(this);
    }
  
    handleOnChange = (event, value) => {
      this.setState({
        value
      });
    };
  
    handleOnKeyDown = (event) => {
      const { formData } = this.props;
      const rawDomain = this.state.value;
      const parsedDomain = parseDomain(rawDomain);
      switch (event.keyCode) {
        case 13:
          if (parsedDomain) {
            dataActions.addUrl(formData, rawDomain, parsedDomain);
            this.setState({
              value: ''
            });
          } else {
            dataActions.openSnackbar(`${rawDomain} can not be parsed as a domain`);
          }
          break;
      }
    };
  
    handleOnDelete = (i) => {
      const { formData } = this.props;
      dataActions.removeUrl(formData, i);
    }
  
    handleGetAlexa = (website) => {
      dataActions.getAlexa(`${website.domain}.${website.tld}`);
    };
  
    handleGetTwitterLogoColor = (handle) => {
      const splitHandle = handle.split('/');
      dataActions.getTwitterLogoColor(splitHandle[splitHandle.length-1]);
    };
  
    render() {
      const { getAlexa, label, value } = this.props;
  
      return (
        <div
          className="container__row"
        >
          <h3>
            {label}
          </h3>
          <TextField
            hintText={`Enter ${label}`}
            onChange={this.handleOnChange}
            onKeyDown={this.handleOnKeyDown}
            style={{
              width: '100%'
            }}
            value={this.state.value}
          />
          { value.length > 0 ?
            <table>
              <tbody>
                { value.map((u, i) =>
                  <tr
                    key={i}
                  >
                    <td>
                      {u.parsedDomain.domain}.{u.parsedDomain.tld}
                    </td>
                    <td>
                      <span
                        className="small-text"
                      >
                        {u.rawDomain}
                      </span>
                    </td>
                    { getAlexa &&
                      <td>
                        <FlatButton
                          label="Alexa Ranking"
                          onClick={this.handleGetAlexa.bind(this, u.parsedDomain)}
                        />
                      </td>
                    }
                    <td>
                      {u.parsedDomain.domain === 'twitter' &&
                        <FlatButton
                          backgroundColor={twitter}
                          label="Twitter Logo Color"
                          onClick={this.handleGetTwitterLogoColor.bind(this, u.rawDomain)}
                        />
                      }
                    </td>
                    <td
                      className="with--delete"
                    >
                      <button
                        onClick={this.handleOnDelete.bind(this, i)}
                      >
                        <DeleteForever
                          color={red500}
                          style={{
                            height: 20,
                            padding: 0,
                            width: 20
                          }}
                        />
                      </button>
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
            :
            <div
              className="no-web-urls-found"
            >
              <div
                className="no-publications-found"
              >
                No Website URLs found.
              </div>
            </div>
          }
        </div>
      )
    }
  
  }
  