import React, {Component} from 'react';
import PropTypes from 'prop-types';
import TextField from '../TextField';
import Button from '../Button';
import X from '../new-icons/X';
import Check from '../new-icons/Check';
import Input from '../Input';
import styles from './RichTextAreaLinkForm.scss';

class RichTextAreaLinkForm extends Component {
  state = {
    text: this.props.selection
  };

  getChangeHandler = field => ({target: {value}}) => {
    this.setState({[field]: value});
  };

  handleSubmit = event => {
    event.preventDefault();

    const {onSubmit} = this.props;
    onSubmit && onSubmit(this.state);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        {this.renderTextInput()}
        <div className={styles.input}>
          <TextField>
            <Input
              dataHook="rich-text-area-link-url"
              onChange={this.getChangeHandler('href')}
              placeholder="URL this link should go to"
              size="small"
              width="190px"
              />
          </TextField>
        </div>
        <div className={styles.buttons}>
          <span className={styles.button}>
            <Button theme="icon-standardsecondary" onClick={this.props.onCancel} height="small" type="button">
              <X/>
            </Button>
          </span>
          <span className={styles.button}>
            <Button theme="icon-standard" height="small" type="submit" disabled={!this.state.href}>
              <Check/>
            </Button>
          </span>
        </div>
      </form>
    );
  }

  renderTextInput() {
    return (
      <div className={styles.input}>
        <TextField>
          <Input
            dataHook="rich-text-area-link-text"
            defaultValue={this.props.selection}
            onChange={this.getChangeHandler('text')}
            placeholder="Text to display"
            size="small"
            width="190px"
            />
        </TextField>
      </div>
    );
  }
}

RichTextAreaLinkForm.propTypes = {
  selection: PropTypes.string,
  onCancel: PropTypes.func,
  onSubmit: PropTypes.func,
  isTextInputVisible: PropTypes.bool
};

export default RichTextAreaLinkForm;
