/**
 * 关联refs中的DOM
 */

import $ from 'jquery'
import { findDOMNode } from 'react-dom'

const isDev = process.env.NODE_ENV === 'development'

function getDisplayName(target) {
  if (target.displayName) {
    return target.displayName
  }

  return target.constructor && target.constructor.name || 'Component'
},


/**
 * 关联refs中的DOM
 *
 * @param {string} name refs中的组件名
*
 * @return {object}
 */
export default function getEl(name) {
    return (target, key, descriptor) => {

        // bind native node
        descriptor.get = function () {
            if (!this.refs[name]) {
                return null
            }

            return findDOMNode(this.refs[name])
        }

        const own = Object.prototype.hasOwnProperty

        const jQueryPropertyName = `$${key}`

        if (isDev && own.call(target, jQueryPropertyName)) {
            const displayName = getDisplayName(target)
            console.warn(`${jQueryPropertyName} also in ${displayName}`)

            return
        }

        // bind jQuery node
        Object.defineProperty(target, jQueryPropertyName, {
            get() {
                if (!this.refs[name]) {
                    return null
                }

                return $(findDOMNode(this.refs[name]))
            }
        })
    }
}