import * as React from 'react'
import InlineSVG from 'svg-inline-react'
import { User } from '../../../modules/auth/interfaces'
import './styles.styl'

import { ActionCreator } from 'typescript-fsa'

const poweredBy = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/powered-by-drift.svg')

interface BlankStateProps {
  user: User
  avatarUrl: string
  backgroundColor: string
  foregroundColor: string
  actions: {
    userHasSeenOnboarding: ActionCreator<boolean>,
  }
}

const BlankState = ({ user, avatarUrl, backgroundColor, foregroundColor, actions: { userHasSeenOnboarding } }: BlankStateProps): JSX.Element => {
  return (
    <div className="popup-feed-activity-group">
      <div className="drift-outbound-activity-blank-state">
        <div className="welcome-message">
          <div className="welcome-message-header" style={{ color: `#${foregroundColor}`, backgroundColor: `#${backgroundColor}` }}>
            <img className="popup-feed-activity-group-avatar" style={{ 'border-color': `#${backgroundColor}` }} src={avatarUrl} />
            <div className="name">{user.name}</div>
            <div className="welcome-message-body">
              Hey there! 👋🏼 You’re only seeing this because we’re talking right now via email. What questions can I help you with?
            </div>
          </div>
          <div className="welcome-message-composer">
            <div className="message">Type your message…</div>
            <InlineSVG className="powered-by" src={poweredBy} />
          </div>
        </div>
        <h3 className="drift-popup-header">Greet the people on your site</h3>
        <p className="drift-outbound-p-tag">Send your first Drift email to automatically greet people with a personalized message when they visit your site.</p>
        <button type="submit" className="drift-outbound-button button-primary"
          onClick={() => {
            userHasSeenOnboarding(false)
            chrome.tabs.create({ url: 'https://mail.google.com' })
          }}>
          Send a tracked email with Drift
        </button>
      </div>
    </div>
  )
}

export default BlankState