/**
 * Aside component
 *
 * Generated by coz on 2017-01-01,
 * from a template provided by apeman-asset-templates.
 *
 * @function Aside
 */
'use strict'

import React, { Component } from 'react'
import defineDebug from 'debug'
import classnames from 'classnames'
import { autobind } from 'breact'
import AmazonAd from '../ad/amazon_ad'
import NewsList from '../lists/news_list'
import {
  ApSection, ApSectionHeader, ApSectionBody
} from 'apeman-react-basic'
import { asConnected, asView, asServed, asLocaled, forSpin, forLink, combine } from '../../wrappers'
const debug = defineDebug('project:fragment:aside')

/** @lends Aside */
class Aside extends Component {
  constructor (props) {
    super(props)
    const s = this
    autobind(s)
  }

  render () {
    const s = this
    const {
      props
    } = s
    let {
      ad = true,
      l,
      news,
      adReady,
      children
    } = props
    return (
      <aside className={ classnames('aside') }>
        {
          ad && adReady ? (
              <ApSection className='aside-ad-section'>
                <ApSectionHeader lined>
                  { l('headings.AD') }
                </ApSectionHeader>
                <ApSectionBody>
                  <AmazonAd />
                </ApSectionBody>
              </ApSection>
            ) : null
        }
        {
          news ? (
              <ApSection className='aside-news-section'>
                <ApSectionHeader lined>
                  { l('headings.LATEST_NEWS') }
                </ApSectionHeader>
                <ApSectionBody>
                  <NewsList news={ news.entities }
                            alt={ l('alt.NO_NEWS_FOUND') }
                            hasMore={ true }
                            moreText={ l('buttons.SHOW_MORE') }
                            onMore={ s.handleNewsMore }
                            moreSpinning={ false }
                  />
                </ApSectionBody>
              </ApSection>
            ) : null
        }
        <div>
          { children }
        </div>
      </aside>
    )
  }

  componentDidMount () {
    const s = this
    const { srvc } = s.props
    const { setMemory } = srvc.memoryService
    s._adReadyTimer = setTimeout(() => {
      setMemory('adReady', true)
    }, 3000)
  }

  componentWillUnmount () {
    const s = this
    const { srvc } = s.props
    const { setMemory } = srvc.memoryService
    clearTimeout(s._adReadyTimer)
    setMemory('adReady', false)
  }

  // --------------------
  // Handlers
  // --------------------

  handleNewsMore () {
    const s = this
    const {
      urlForOtherViewName
    } = s.service('urlService')
    s.followLink(urlForOtherViewName('NewsListView'))
  }
}

export default combine(
  forSpin(),
  forLink(),
  asConnected(
    (state, { srvc }) => {
      const { getMemory } = srvc.memoryService
      const { l } = srvc.localeService
      return {
        l,
        srvc,
        adReady: getMemory('adReady')
      }
    }
  ),
  asServed.proxy()
)(Aside)