import React from "react"
import PropTypes from "prop-types"
import { FormattedMessage } from "react-intl"

export default class AuthorizeBtn extends React.Component {
  static propTypes = {
    className: PropTypes.string
  }

  onClick =() => {
    let { authActions, authSelectors } = this.props
    let definitions = authSelectors.definitionsToAuthorize()

    authActions.showDefinitions(definitions)
  }

  render() {
    let { authSelectors, getComponent } = this.props
    //must be moved out of button component
    const AuthorizationPopup = getComponent("authorizationPopup", true)
    let showPopup = !!authSelectors.shownDefinitions()
    let isAuthorized = !!authSelectors.authorized().size

    return (
      <div className="auth-wrapper">
        <button className={isAuthorized ? "btn authorize locked" : "btn authorize unlocked"} onClick={ this.onClick }>
          <FormattedMessage
            id="authorize"
            description="Authorize"
            defaultMessage="Authorize"
          />
          <svg width="20" height="20">
            <use href={ isAuthorized ? "#icons_locked" : "#icons_unlocked" } xlinkHref={ isAuthorized ? "#icons_locked" : "#icons_unlocked" } />
          </svg>
        </button>
      { showPopup && <AuthorizationPopup /> }
      </div>
    )
  }


  static propTypes = {
    getComponent: PropTypes.func.isRequired,
    authSelectors: PropTypes.object.isRequired,
    errActions: PropTypes.object.isRequired,
    authActions: PropTypes.object.isRequired,
  }
}