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

import React from 'react'
import defineDebug from 'debug'
import { clone } from 'asobj'
import {
  ApForm,
  ApFieldSet,
  withForm,
  ApButton
} from 'apeman-react-basic'
import ValueField from '../fields/value_field'

import copyToClipboard from 'copy-to-clipboard'

import TwitterButton from '../buttons/twitter_button'
import FacebookButton from '../buttons/facebook_button'
import HatebuButton from '../buttons/hatebu_button'
import { asLocaled, asServed, combine } from '../../wrappers'

const debug = defineDebug('project:fragment:share-form')

/** @lends ShareForm */
const ShareForm = (props) => {
  let {
    l,
    srvc,
    target,
    labels,
    idOf,
    text,
    url,
    onCopy,
    errorList,
    errorStyle
  } = props
  let formProps = clone(props, {
    without: [
      'l',
      'srvc',
      'target',
      'errors',
      'labels',
      'types',
      'onCancel',
      'onUpdate',
      'onCopy',
      'url',
      'text'
    ]
  })
  const { getLang } = srvc.localeService
  return (

    <ApForm { ...formProps }
            centered
            className='share-form'>

      <ApFieldSet plain>
        { errorList }
        { errorStyle }
        <ValueField id={ idOf('target')}
                    name='target'
                    value={ target }
                    label={ labels.target }
        />

        <ValueField id={ idOf('url')}
                    name='url'
                    label={ labels.url }
        >
          <div className='share-form-url'>
            <a href={ url } target='_blank' className='share-form-url-link'>
              { url }
            </a>
            <ApButton className='share-form-url-copy-button'
                      onTouchStart={ () => {
                        copyToClipboard(url)
                        console.log('URL copied:', url)
                        onCopy && onCopy(url)
                      }}>
              <span className='share-form-url-copy-message'>
                { l('messages.COPIED') }
              </span>
              <span>
                { l('buttons.DO_COPY') }
              </span>
            </ApButton>
          </div>
        </ValueField>
        <ValueField id={ idOf('way')}
                    name='way'
                    label={ labels.way }
        >
          <div className='share-form-button-row'>
            <HatebuButton ballon
                          url={ url }
                          title={ text }
                          lang={ getLang() }
            />
            <TwitterButton large
                           showCount
                           hashtags={ l('app.APP_NAME_SHORT') }
                           url={ url }
                           text={ text }
            />
            <FacebookButton large
                            showCount
                            url={ url }/>
          </div>
        </ValueField>
      </ApFieldSet>
    </ApForm>
  )
}

export default combine(
  asLocaled.proxy(),
  asServed.proxy()
)(withForm(ShareForm))