import * as React from 'react'
import InlineSVG from 'svg-inline-react'
import { debounce } from 'lodash'
import './styles.styl'
import { SettingsComponentProps } from './interfaces'
import Toggle from '../../Settings/Toggle'

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

const flashSaveIcon = (querySelector: string) => {
  const savedIcon = document.querySelector(querySelector) as HTMLElement
  savedIcon.style.opacity = '1'
  setTimeout(() => {
    savedIcon.style.opacity = '0'
  }, 2000)
}

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

  debouncedSaveNotifications = debounce(() => {
    flashSaveIcon('.notifications-settings-saved')
  }, 500)

  render() {
    const {
      notificationVisitedSite,
      notificationClickedEmailLink,
      notificationOpenedEmail,
      handleOnSettingsClick,
      handleCloseSettings,
      actions: { updateSetting, logout },
    } = this.props

    return (
      <div className="settings-wrapper settings-notification-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="settings-manage-link" onClick={handleOnSettingsClick}>
            &lt; All Settings
          </div>
          <div className="title">
            <h3>Browser Notifications</h3>
            <InlineSVG className="saved-icon notifications-settings-saved" src={saved} />
            <p className="drift-outbound-p-tag settings">
              Get notified when a prospect opens or clicks your email, visits pages on your site, and when they send you a message.
            </p>
          </div>
          <div className="setting">
            <div className="setting-toggle-item">
              <div>Visited your site</div>
              <Toggle
                initialValue={notificationVisitedSite}
                settingName={'notificationVisitedSite'}
                onChange={this.debouncedSaveNotifications}
                updateSetting={updateSetting}
              />
            </div>
            <div className="setting-toggle-item">
              <div>Clicked a tracked link in email</div>
              <Toggle
                initialValue={notificationClickedEmailLink}
                settingName={'notificationClickedEmailLink'}
                onChange={this.debouncedSaveNotifications}
                updateSetting={updateSetting}
              />
            </div>
            <div className="setting-toggle-item">
              <div>Opened your email</div>
              <Toggle
                initialValue={notificationOpenedEmail}
                settingName={'notificationOpenedEmail'}
                onChange={this.debouncedSaveNotifications}
                updateSetting={updateSetting}
              />
            </div>
          </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 SettingsNotifications