import { randomCode, camelToLine } from './index'

export function useStyled (globalProperties) {
  globalProperties.styled = function (node,styleObj, type = 'ele') {
    const style = resolveStyle(styleObj)
    const globalStyle = globalProperties.$style
    let randomName = ''
    let has = false
    Object.keys(globalStyle).map(key => {
      if (style === globalStyle[key]) {
        randomName = key.split('|')[1]
        has = true
      }
    })
    if (!has) {
      randomName = 'style_' + type + '_' + randomCode(8)
      if (node.className) {
        globalStyle[node.className.split(' ')[0] + '|' + randomName] = style.replace(/\n\r|\n./g, '')
      } else {
        globalStyle['|' + randomName] = style.replace(/\n\r|\n./g, '')
      }
      buildStyle(globalStyle)
    }
    node.setAttribute('data-style', randomName)
  }
}

// 构建样式
function buildStyle (style) {
  let styleDom = document.getElementById('seldom-style')
  if (!styleDom) {
    styleDom = document.createElement('style')
    styleDom.id = 'seldom-style'
    document.head.appendChild(styleDom)
  }
  let text = ''
  for (const key in style) {
    const className = key.split('|')[0]
    if (className) {
      text += `.${ className }[data-style=${ key.split('|')[1] }]{${ style[key] }}`
    } else {
      text += `[data-style=${ key.split('|')[1] }]{${ style[key] }}`
    }
  }
  styleDom.innerHTML = text
}

// 样式对象转换为字符串
function resolveStyle (styleObj) {
  let style = ''
  for (const key in styleObj) {
    style += camelToLine(key) + ':' + styleObj[key] + ';'
  }
  return style
}