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

import React from 'react'
import defineDebug from 'debug'
import { asPure } from '../../wrappers'
import { parse as parseUrl } from 'url'

const debug = defineDebug('project:fragment:hatebu-button')

const hatebuRef = (url) => {
  let { host, path } = parseUrl(url)
  return `http://b.hatena.ne.jp/entry/${host + path}`
}

/** @lends HatebuButton */
const HatebuButton = ({
  className,
  lang = 'ja',
  title,
  ballon = false,
  url
}) => (
  <span className='hatebu-button'>
    <span dangerouslySetInnerHTML={{
      __html: `
<a href="${hatebuRef(url)}"
   class="hatena-bookmark-button"
   data-hatena-bookmark-layout="${ballon ? 'simple-balloon' : 'simple'}"
   data-hatena-bookmark-lang="${lang}"
   data-hatena-bookmark-title="${title}"
   title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png"
   alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
`
    }}>

    </span>
  </span>
)

export default asPure()(HatebuButton)