import React from 'react';
import { connect } from 'redux-bundler-react';

class PermalinkModal extends React.Component {
  constructor(props){
    super(props);
    this.close = this.close.bind(this);
  }

  close() {
    const { doModalClose } = this.props;
    doModalClose();
  }

  render() {
    const { theme, permalinkParams,  windowLocationOrigin: origin, windowLocationPathname: pathname } = this.props;
    const url = `${origin}${pathname}?${permalinkParams}`;
    return (
      <div>
        <div className={"cm-modal-header " + theme}>Permalink</div>
        <div
          className="cm-modal-body"
          style={{ height: 200, top: 0, bottom: 0, left: 0, right: 0 }}
        >
          <div className="cm-form-group">
          <p>
            Copy the link below to send a permalink to other users or save for later use.
          </p>
          <p>
            The query parameters at the end of the link are used to configure the map so that it zooms to a location or turns layers on.
          </p>
          <p>
            <strong>
              <a href={url}>
                { url }
              </a>
            </strong>
          </p>
          <p>
            Right click the link above, choose "Copy Link Address"
          </p>
          </div>
        </div>
        <div className="cm-modal-footer">
          <button 
            className={"cm-btn cm-btn-theme " + theme} 
            onClick={this.close}
          >
            Close
          </button>
        </div>
      </div>
    );
  }
}

export default connect(
  'selectPermalinkParams',
  'selectWindowLocationOrigin',
  'selectWindowLocationPathname',
  'selectTheme',
  'doModalClose',
  PermalinkModal
)
