import * as React from 'react'
import InlineSVG from 'svg-inline-react'
import { debounce } from 'lodash'
import { Input, Button } from '@drifthq/tide'

import './styles.styl'
import { SettingsComponentProps } from './interfaces'
import { APP_URL, GOOGLE_AUTH_URL, GOOGLE_CLIENT_ID, CONVERSATION_API } from '../../utils/ResourceConstants'
import { encodeQueryData } from '../../utils/helpers'
import Toggle from './Toggle'
import Inboxes from './Inboxes'
import { GoogleScope } from '../../modules/auth/constants'
const close = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../img/svg/settings-close.svg')
const driftLogo = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../img/svg/Drift_logo.svg')
const saved = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../img/svg/save-check.svg')

declare const __VERSION__: string

class Settings extends React.Component<SettingsComponentProps> {
  componentWillMount() {
    this.props.actions.fetchUserProperties()
    this.props.actions.fetchGoogleScopes()
  }

  debouncedSaveBccEmail = debounce((bccEmailAddress: string) => {
    this.props.actions.updateSetting({ bccEmailAddress })
    const savedIcon = document.querySelector('.bcc-saved') as HTMLElement
    savedIcon.style.opacity = '1'
    setTimeout(() => {
      savedIcon.style.opacity = '0'
    }, 2000)
  }, 500)

  handleBccEmailChange = (bccEmailAddress: string) => {
    this.debouncedSaveBccEmail(bccEmailAddress)
  }

  handleGoogleConnectClick = () => {
    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)}`)
  }

  handleCSVdownloadClick = () => {

    const { accessToken } = this.props
    window.open(`${CONVERSATION_API}/sequences/per_rep_csv?access_token=${accessToken}`)

  }

  render() {
    const {
      handleManageNotifs,
      handleManageDomains,
      handleCloseSettings,
      bccStatus,
      bccEmailAddress,
      gmailConnected,
      hasExportSequenceData,
      actions: { updateSetting, logout },
    } = this.props
    const inputProps = {
      spellCheck: false,
    }
    return (
      <div className="settings-wrapper">
        <div className="settings-header">
          <InlineSVG className="powered-by-drift active" src={driftLogo} />
          <InlineSVG className="settings-close" src={close} onClick={handleCloseSettings} />
        </div>
        <div className="settings">
          <div className="title">
            <h3>Settings</h3>
          </div>
          <div className="setting">
            <div className="settings-notifs-manage-link" onClick={handleManageNotifs}>
              Manage Notifications &gt;
            </div>
            <h5 className="drift-outbound-header-text settings">Browser Notifications</h5>
            <p className="drift-outbound-p-tag settings">
              Get notified when prospects open and click your emails, visit pages on your site and
              when they start a conversation.
            </p>
          </div>
          <div className="setting">
            <div className="settings-notifs-manage-link" onClick={handleManageDomains}>
              Manage Domains &gt;
            </div>
            <h5 className="drift-outbound-header-text settings">Unfollowed Domains</h5>
            <p className="drift-outbound-p-tag settings">
              Stop seeing activity for email domains you’ve unfollowed.
            </p>
          </div>
          <div className="setting">
            <Toggle
              initialValue={bccStatus}
              settingName={'bccStatus'}
              updateSetting={updateSetting}
            />
            <div className="save-header">
              <h5 className="drift-outbound-header-text settings">Bcc Email Activity to CRM</h5>
              <InlineSVG className="saved-icon bcc-saved" src={saved} />
            </div>
            <p className="drift-outbound-p-tag settings">
              Automatically log email activity in your CRM. We’ll add your CRM forwarding address as
              a BCC when you send a tracked email.
            </p>
          </div>
          {bccStatus && (
            <div className="setting">
              <div className="bcc-email-address">
                <h5 className="drift-outbound-header-text settings">Bcc Email Address</h5>
                <Input
                  type="email"
                  defaultValue={bccEmailAddress}
                  placeholder="e.g. emailtocrm@1234abcdsalesforce.com"
                  onChange={(e: any) => this.handleBccEmailChange(e.target.value)}
                  {...inputProps}
                />
              </div>
            </div>
          )}
          <Inboxes />
          <div className="setting drift-sequences-setting">
            <div className="save-header">
              <h5 className="drift-outbound-header-text settings">Drift Sales Sequences</h5>
            </div>
            <p className="drift-outbound-p-tag settings">
              Enroll a contact in a Drift email sequence with one click.
              {' Sequences are sent on your behalf through your gmail account. '}
              <a
                href="https://help.drift.com/playbooks/send-an-outbound-email-sequence-with-drift"
                target="_blank"
              >
                Learn more
              </a>.
            </p>
            <Button type="secondary" onClick={this.handleGoogleConnectClick} disabled={gmailConnected}>
              {gmailConnected ? 'Gmail Connected' :'Connect Gmail' }
            </Button>
            {hasExportSequenceData &&
              <Button type="secondary" onClick={this.handleCSVdownloadClick}>
                Your Sequence Metrics
              </Button>
            }
          </div>
          <div className="setting-footer">
            <a className="logout" onClick={() => logout()}>
              logout
            </a>
            <div className="drift-outbound-version">version {__VERSION__}</div>
          </div>
        </div>
      </div>
    )
  }
}

export default Settings