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

import React from 'react'
import defineDebug from 'debug'
import classnames from 'classnames'
import { IconClasses } from 'ore-fol-enums'
import { ApDropdown, ApDropdownItem } from 'apeman-react-basic'

const debug = defineDebug('project:fragment:ellipsis-button')
const { ELLIPSES_ICON } = IconClasses
const noop = () => undefined

/** @lends EllipsisButton */
const EllipsisButton = ({
  onTap,
  open = false,
  labels = {},
  handlers = {},
  icons = {}
}) => (
  <ApDropdown className='ellipsis-button'
              open={ open }
              title={ <i className={ classnames('ellipsis-button-icon', ELLIPSES_ICON) }/> }
              onTap={ onTap }
              onOutside={ open ? onTap : noop }
  >
    {
      Object.keys(handlers)
        .filter((name) => !!handlers[ name ])
        .map((name) => (
          <ApDropdownItem key={ name }
                          onTap={ handlers[ name ] }>
            {
              icons[ name ] ? (
                  <i className={ classnames('ellipsis-button-item-icon', icons[ name ]) }/>
                ) : null
            }
            { labels[ name ] || name }
          </ApDropdownItem>
        ))
    }
  </ApDropdown>
)

export default EllipsisButton