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

import React from 'react'
import classnames from 'classnames'
import defineDebug from 'debug'
import { asPure } from '../../wrappers'

const debug = defineDebug('project:fragment:color-select')

/** @lends ColorSelect */
const ColorSelect = ({
  id,
  name,
  value,
  className,
  onChange,
  options
}) => (
  <div className={ classnames('color-select', className) }
       id={ id }
  >
    <div>
      {
        options.slice(0, options.length / 2).map((itemColor) => (
          <ColorSelect.Item key={ itemColor }
                            { ...{ id, name, itemColor, value, onChange } } />
        ))
      }
    </div>
    <div>
      {
        options.slice(options.length / 2).map((itemColor) => (
          <ColorSelect.Item key={ itemColor }
                            { ...{ id, name, itemColor, value, onChange } } />
        ))
      }
    </div>
  </div>
)

Object.assign(ColorSelect, {
  Item ({ id, name, itemColor, value, onChange }) {
    let itemId = `${id}-color-${itemColor.replace('#', '')}`
    let selected = itemColor === value
    return (
      <label htmlFor={ itemId }
             key={ itemColor }
             className={ classnames('color-select-item', {
               'color-select-item-selected': selected
             }) }
      >
        <input type='radio'
               id={ itemId }
               name={ name }
               value={ itemColor }
               checked={ selected }
               className='color-select-item-radio'
               onChange={ onChange }
        />
        <span className="color-select-item-value"
              style={ { background: itemColor } }
        />
      </label>
    )
  }
})

export default asPure()(ColorSelect)