/**
 * ThreadPanel component
 *
 * Generated by coz on 2016-12-23,
 * from a template provided by apeman-asset-templates.
 *
 * @function ThreadPanel
 */
'use strict'

import React from 'react'
import defineDebug from 'debug'
import classnames from 'classnames'
import { ApContainer, ApButton, ApIconButton } from 'apeman-react-basic'
import { asPure, asServed, asLocaled, combine } from '../../wrappers'

import { IconClasses } from 'ore-fol-enums'
import TagLink from '../links/tag_link'
import FacebookButton from '../buttons/facebook_button'
import TwitterButton from '../buttons/twitter_button'
import HatebuButton from '../buttons/hatebu_button'

const { TAG_ICON, ADD_ICON, EDIT_ICON, DESTROY_ICON, LOCK_ICON, UNLOCK_ICON } = IconClasses
const debug = defineDebug('project:fragment:thread-panel')

/** @lends ThreadPanel */
const ThreadPanel = ({
  l,
  srvc,
  thread,
  tagValues,
  editable = false,
  destroyable = false,
  lockable = false,
  sharable = false,
  url,
  onEdit,
  onDestroy,
  onLock,
  onTag
}) => {
  const { dateString, userNameString, getLang } = srvc.localeService
  return (
    <div className='thread-panel'>
      <ApContainer className='thread-panel-container'>
        <ThreadPanel.Source source={ (thread.additionalInfo || {}).source }/>
        <ThreadPanel.Actions { ...{
          thread,
          editable,
          destroyable,
          lockable,
          onEdit,
          onDestroy,
          onLock
        }} />
        <div className='thread-panel-title'>
          { thread.name }
        </div>
        <p className='thread-panel-desc'>{ thread.description }</p>
        <p className='thread-panel-meta'>
          <span className='thread-panel-date'>{ dateString(thread.createdAt) }</span>
          <span> - </span>
          <span className='thread-panel-owner'>{ userNameString(thread.owner) }</span>
        </p>

        <ThreadPanel.Tags { ...{ tagValues, onTag } }
                          labels={ { add: l('buttons.SHOW_TAG') } }
        />
        {
          sharable ? (
              <ThreadPanel.Shares url={ url }
                                  lang={ getLang() }
                                  name={ thread.name }
                                  tag={ l('app.APP_NAME_SHORT') }
              />
            ) : null
        }
      </ApContainer>
    </div>
  )
}

Object.assign(ThreadPanel, {
  Source ({
    source
  }) {
    if (!source) {
      return null
    }
    let { url, favicon, title } = source
    return (
      <div className='thread-panel-source'>
        <span className='thread-panel-source-label'>{ l('labelsTHREAD_SOURCE') }</span>
        <a href={ url }
           target='_blank'
           className='thread-panel-source-link'>
          <img className='thread-panel-source-icon'
               src={ favicon }
          />
          <span>{ title || url }</span>
        </a>
      </div>
    )
  },
  Actions ({
    thread,
    editable,
    destroyable,
    lockable,
    onEdit,
    onDestroy,
    onLock
  }) {
    if (thread.locked) {
      if (lockable) {
        return (
          <div className='thread-panel-actions thread-panel-actions-locked'>
            <ApIconButton icon={ LOCK_ICON }
                          simple
                          className='thread-panel-lock-button'
                          onTap={ () => onLock(thread)}
            />
          </div>
        )
      } else {
        return null
      }
    }
    let hasAction = (editable || destroyable || lockable)
    if (!hasAction) {
      return null
    }
    return (
      <div className='thread-panel-actions'>
        {
          lockable ? (
              <ApIconButton icon={ UNLOCK_ICON }
                            simple
                            className='thread-panel-lock-button'
                            onTap={ () => onLock(thread)}
              />
            ) : null
        }
        {
          editable ? (
              <ApIconButton icon={ EDIT_ICON }
                            simple
                            className='thread-panel-edit-button'
                            onTap={ () => onEdit(thread)}
              />
            ) : null
        }
        {
          destroyable ? (
              <ApIconButton icon={ DESTROY_ICON }
                            simple
                            className='thread-panel-destroy-button'
                            onTap={ () => onDestroy(thread)}
              />
            ) : null
        }
      </div>
    )
  },

  Shares ({
    name = '',
    lang,
    tag,
    url
  }) {
    return (
      <div className='thread-panel-social'>
        <HatebuButton url={ url }
                      lang={ lang }
                      title={ String(name).slice(0, 100).trim() }
        />
        <TwitterButton text={ String(name).slice(0, 100).trim() }
                       url={ url }
                       hashtags={ tag }
        />
        <FacebookButton url={ url }
        />
      </div>
    )
  },

  Tags ({
    labels,
    tagValues,
    onTag
  }) {
    return (
      <p className='thread-panel-meta thread-panel-meta-tags'>
        <ApButton className='thread-panel-tag-add-button'
                  simple
                  onTap={ onTag }
        >
          <i className={ classnames('thread-panel-button-icon', ADD_ICON) }/>
          { labels.add }
        </ApButton>
        {
          tagValues.length === 0 ? null : (
              <span>
                <i className={ classnames('thread-panel-meta-icon', TAG_ICON) }/>
                {
                  tagValues.map((tagValue) => (
                    <TagLink key={ tagValue }
                             value={ tagValue }
                             className='thread-panel-meta-tag'
                    />
                  ))
                }
              </span>
            )
        }

      </p>
    )
  }
})

export default combine(
  asPure(),
  asServed.proxy(),
  asLocaled.proxy()
)(ThreadPanel)