import React, {PureComponent, PropTypes} from 'react';

import Link from '../base/link';
import {showModal} from '../modals/index';
import SettingsModal from '../modals/settings-modal';

class ResponseError extends PureComponent {
  render () {
    const {error, fontSize} = this.props;

    let msg = null;
    if (error && error.toLowerCase().indexOf('certificate') !== -1) {
      msg = (
        <button className="btn btn--clicky" onClick={() => showModal(SettingsModal)}>
          Disable SSL Validation
        </button>
      );
    } else if (error && error.toLowerCase().indexOf('getaddrinfo') !== -1) {
      msg = (
        <button className="btn btn--clicky" onClick={() => showModal(SettingsModal)}>
          Setup Network Proxy
        </button>
      );
    } else {
      msg = (
        <Link button
              className="btn btn--clicky"
              href="https://insomnia.rest/documentation/">
          Documentation
        </Link>
      );
    }

    return (
      <div>
        <pre className="selectable pad force-word-wrap" style={{fontSize: `${fontSize}px`}}>
          {error}
        </pre>
        <hr/>
        <div className="text-center pad">
          <p className="faint pad-left pad-right">
            Here are some additional things that may help.
          </p>
          {msg}
          &nbsp;&nbsp;
          <Link button className="btn btn--clicky margin-top-sm"
                href="https://insomnia.rest/documentation/support-and-feedback/">
            Contact Support
          </Link>
        </div>
      </div>
    );
  }
}

ResponseError.propTypes = {
  // Required
  error: PropTypes.string.isRequired,
  url: PropTypes.string.isRequired,
  fontSize: PropTypes.number.isRequired
};

export default ResponseError;