let consoleLog = console.log

let consoleError = console.error

let consoleWarn = console.warn

const containerStyles = {

  position: 'fixed',

  overflow: 'scroll',

  width: '300px',

  height: '450px',

  display: 'none',

  bottom: '85px',

  zIndex: 100000,

  wordWrap: 'break-word',

  overflowWrap: 'break-word',

  right: '20px',

  marginLeft: '15px',

  backgroundColor: '#fff',

  borderRadius: '8px',

  boxShadow: '2px 4px 5px 3px rgba(224, 224, 224, 0.8)'

}

const floatButtonStyles = {

  opacity: 0.8,

  position: 'fixed',

  width: '70px',

  border: 'none',

  height: '35px',

  bottom: '40px',

  zIndex: 100000,

  right: '15px',

  backgroundColor: '#d4ebf2',

  color: '#fff',

  borderRadius: '50px',

  textAlign: 'center',

  cursor: 'pointer'

}

const buttonDefaultOpacity = {

  opacity: 1

}

const listItemStyles = {

  fontFamily: 'Arial',

  fontSize: '13px',

  paddingTop: '5px',

  paddingBottom: '5px',

  paddingLeft: '15px',

  paddingRight: '15px'

}

const clearBtnStyles = {

  cursor: 'pointer',

  float: 'right',

  paddingRight: '10px',

  paddingTop: '3px',

  opacity: 0.5,

  fontSize: '15px',

  backgroundColor: 'transparent',

  border: 'none'

}

const logoTextStyles = {

  fontFamily: 'Arial',

  fontSize: '16px',

  fontWeight: 'bold',

  paddingLeft: '15px',

  paddingTop: '3px',

  fontStyle: 'italic',

  color: '#525EF9'

}

const notificationBadgeStyles = {

  position: 'absolute',

  display: 'none',

  top: '-3px',

  right: '6px',

  width: '12px',

  height: '12px',

  borderRadius: '50%',

  backgroundColor: 'red'

}

let outfrontLogUl = document.createElement('UL') // Memory leak alert

const notificationBadge = document.createElement('SPAN') // Memory leak alert

const createButtonAndContainer = () => {

  try {

    // Create container start

    const container = document.createElement('DIV')

    container.id = 'outfront-container'

    for (let property in containerStyles) {

      container.style[property] = containerStyles[property]

    }

    // Create container end

    // Create clear console button start

    const clearBtn = document.createElement('BUTTON') // button

    clearBtn.id = 'outfront-clear-btn'

    clearBtn.innerText = String.fromCharCode(55357, 56350) // bug symbol

    for (let property in clearBtnStyles) {

      clearBtn.style[property] = clearBtnStyles[property]

    }

    clearBtn.addEventListener('click', () => (outfrontLogUl.innerHTML = ''))

    container.appendChild(clearBtn)

    // Create clear console button end

    //Create logo text start

    let logo = document.createElement('DIV')

    logo.id = 'outfront-container'

    logo.innerText = 'Console'

    for (let property in logoTextStyles) {

      logo.style[property] = logoTextStyles[property]

    }

    container.appendChild(logo)

    // Create logo text end

    // hr start

    let hr = document.createElement('HR')

    hr.style.marginTop = '1px'

    hr.style.marginBottom = 0

    hr.style.border = 0

    hr.style.borderTop = '1px solid #eaeaea'

    container.appendChild(hr)

    // hr end

    //create ul start

    outfrontLogUl.id = 'outfront-log'

    outfrontLogUl.style.marginTop = '0px'

    container.appendChild(outfrontLogUl)

    //create ul end

    // Create float button start

    const toggleBtn = document.createElement('BUTTON')

    toggleBtn.id = 'outfront-float'

    toggleBtn.innerText = String.fromCharCode(55357, 56350) // bug symbol

    for (let property in floatButtonStyles) {

      toggleBtn.style[property] = floatButtonStyles[property]

    }

    toggleBtn.addEventListener(

      'mouseenter',

      () => (toggleBtn.style.opacity = buttonDefaultOpacity.opacity)

    )

    toggleBtn.addEventListener(

      'mouseout',

      () =>

        (toggleBtn.style.opacity =

          container.style.display === 'none'

            ? floatButtonStyles.opacity

            : buttonDefaultOpacity.opacity)

    )

    toggleBtn.addEventListener('click', () => {

      if (container.style.display === 'none') {

        container.style.display = 'block'

        toggleBtn.style.opacity = buttonDefaultOpacity.opacity

        notificationBadge.style.display = 'none'

      } else {

        container.style.display = 'none'

        toggleBtn.style.opacity = floatButtonStyles.opacity

      }

    })

    // Create float button end

    // Create notification badge start

    // const notificationBadge = document.createElement('SPAN') // initialized in global scope

    notificationBadge.id = 'outfront-badge'

    // notificationBadge.innerText = 'b'

    for (let property in notificationBadgeStyles) {

      notificationBadge.style[property] = notificationBadgeStyles[property]

    }

    toggleBtn.append(notificationBadge)

    // Create notification badge start

    document.body.appendChild(container)

    document.body.appendChild(toggleBtn)

  } catch (error) {

    console.log(error)

  }

}

const toggleNotoficationBadge = color => {

  // toggle notification badge only if container is closed

  if (document.getElementById('outfront-container').style.display !== 'block') {

    notificationBadge.style.display = 'block'

    notificationBadge.style.backgroundColor = color

  }

}

const appendToContainer = (msg, type) => {

  // Create li start

  const logLi = document.createElement('LI')

  logLi.id = 'outfront-log-li'

  for (let property in listItemStyles) {

    logLi.style[property] = listItemStyles[property]

  }

  // Create li end

  if (type === 'log') {

    logLi.style.color = 'black'

    logLi.style.backgroundColor = 'white'

    toggleNotoficationBadge('cyan')

  } else if (type === 'warn') {

    logLi.style.color = 'orange'

    logLi.style.backgroundColor = '#fff3e7'

    toggleNotoficationBadge('orange')

    // logLi.style.borderTop = '0.2px solid orange'

    // logLi.style.borderBottom = '0.1px solid orange'

  } else if (type === 'error') {

    logLi.style.color = 'red'

    logLi.style.backgroundColor = '#ffeaea'

    toggleNotoficationBadge('red')

    // logLi.style.borderTop = '0.2px solid red'

    // logLi.style.borderBottom = '0.1px solid red'

  }

  let textNode = document.createTextNode(msg)

  logLi.appendChild(textNode)

  // const outfrontLogUl = document.getElementById('outfront-log')

  outfrontLogUl.style.listStyleType = 'none'

  outfrontLogUl.style.padding = 0

  outfrontLogUl.appendChild(logLi)

}

console.log = msg => {

  consoleLog(msg) // do the usual logging as well

  appendToContainer(msg, 'log')

}

console.error = msg => {

  consoleError(msg) // do the usual logging as well

  appendToContainer(msg, 'error')

}

console.warn = msg => {

  consoleWarn(msg) // do the usual logging as well

  appendToContainer(msg, 'warn')

}

window.onerror = (message, source, lineno, colno, error) => {

  appendToContainer(message + '::' + source.split('/')[3] + ':' + lineno, 'error')

}

const outfront = () => {

  createButtonAndContainer()

}

// window.onload = () => outfront()

export default outfront