import React, { Component } from 'react'
import { connect } from 'react-redux'

import {
  EfluxLogo, EfluxClose, EfluxMenu
} from './eflux.icons'
import { PlayButton } from './viewer.icons'
import actions from 'app/actions'

const EfluxChrome = React.memo(({ navStyle, playing, transcriptOpen }) => (
  <div className={"eflux-header " + navStyle + (transcriptOpen ? ' transcript-open' : '')}>
    <div className="eflux-logo">
      <a href="/">
        {EfluxLogo}
      </a>
    </div>
    <div className="eflux-nav">
      <PlayButton playing={playing} />
      <div className="transcript-icon" onClick={() => actions.viewer.toggleComponent('transcript')}>
        {EfluxMenu}
      </div>
    </div>
  </div>
))

const mapStateToProps = state => ({
  navStyle: state.viewer.navStyle,
  playing: state.audio.playing,
  transcriptOpen: state.viewer.transcript,
})

export default connect(mapStateToProps)(EfluxChrome)