import * as cx from 'classnames'
import * as React from 'react'

import { CSSTransitionGroup } from 'react-transition-group'
import InlineSVG from 'svg-inline-react'
import { encodeQueryData } from '../../utils/helpers'
import { HeaderComponentProps } from './interfaces'
import SearchComponent from './SearchComponent'

import './styles.styl'
import { PopupView } from '../../interfaces/PopupView'

const powerByDriftLinkParams = {
  utm_source: 'extension',
  utm_medium: 'chrome-extension',
  utm_campaign: 'extension-referral',
}

const gearIcon = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../img/svg/settings.svg')
const conversationIcon = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../img/svg/conversation-notif.svg')
const driftHeaderLogo = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../img/svg/Drift_logo.svg')

class Header extends React.Component<HeaderComponentProps> {
  handleConversationIconClick = () => {
    this.props.actions.searchFocused(false)
    this.props.actions.updateSearchQuery('')
    const elem = document.querySelector('.popup-feed-container .top')
    if (elem) {
      elem.scrollIntoView({ behavior: 'smooth' })
    }
  }

  render() {
    const {
      view,
      searchFocused,
      conversations,
      conversationIconStatus,
      handleOnSettingsClick,
    } = this.props

    return (
      <div>
        <div className="popup-header">
          <SearchComponent />
          <div className={cx('drift-header-logo',{ hide: searchFocused })}>
            <a
              href={`https://www.drift.com/powered-by?${encodeQueryData(powerByDriftLinkParams)}`}
              target="_blank">
              <InlineSVG src={driftHeaderLogo} className="active" />
            </a>
          </div>
          <CSSTransitionGroup
            transitionName="convo"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={300}>
            <div className={cx('header-options', { 'two-icons': conversationIconStatus })}>
              { conversationIconStatus &&
              <div className="conversation-notif" onClick={this.handleConversationIconClick}>
                <InlineSVG src={conversationIcon} />
                <span className="badge">{Object.keys(conversations).length}</span>
              </div> }
              <InlineSVG className={cx('svg-gear', { active: view === PopupView.Settings })} src={gearIcon} onClick={handleOnSettingsClick} />
            </div>
          </CSSTransitionGroup>
        </div>
      </div>
    )
  }
}

export default Header