import * as React from 'react'
import InlineSVG from 'svg-inline-react'

import { APP_URL, GOOGLE_AUTH_URL, GOOGLE_CLIENT_ID } from '../../utils/ResourceConstants'
import { encodeQueryData } from '../../utils/helpers'
import { GoogleScope } from '../../modules/auth/constants'
import { IConnectGmailProps } from '../interfaces'

const logo = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../img/svg/drift-logo-circle-white.svg')

import './styles.styl'

const ConnectGmail = ({ onSubmit }: IConnectGmailProps) => {
  return (
    <div className="drift-onboarding-take-for-spin">
      <InlineSVG className="drift-popup-logo" src={logo} />
      <h3 className="drift-popup-header">Connect your 
Gmail</h3>
      <p className="drift-outbound-p-tag">Connect your Gmail account to automate your prospecting with Drift.</p>
      <button type="submit" className="drift-outbound-button button-primary"
        onClick={() => {
          const scope = `${GoogleScope.READ} ${GoogleScope.SEND} ${GoogleScope.CALENDAR}`
          const params = {
            scope,
            redirect_uri: `${APP_URL}/accept-integration/google-calendar`,
            client_id: GOOGLE_CLIENT_ID,
            response_type: 'code',
            access_type: 'offline',
            include_granted_scopes: true,
          }

          window.open(`${GOOGLE_AUTH_URL}?${encodeQueryData(params)}`)
          onSubmit()
        }}
      >
        Connect
      </button>
      <a className="login-account-info-text drift-outbound-login-page-link"
        onClick={() => {
          window.parent.postMessage({ type: '@@driftext/toggle_onboarding', visible: false }, '*')
        }}>Not right now</a>
    </div>
  )
}

export default ConnectGmail