import React from 'react'
import { string, bool, shape, oneOfType, node, func } from 'prop-types'
import DemioIcon from '../Icon/Icon'
import './DemioInfo.less'

const DemioInfo = ({
  message, className = '', isError = false, isWarning = false, onClose,
  isSuccess = false, style = {}, callToAction = '', showCloseIcon = false
}) => {
  const getClassExtension = () => {
    let classExtension = ""
    if (isSuccess) classExtension = "--success"
    if (isWarning) classExtension = "--warning"
    if (isError) classExtension = "--error"

    return classExtension
  }

  const getIconType = () => {
    let iconType = "AlertInfo"
    if (isSuccess) iconType = "AlertSuccess"
    if (isWarning) iconType = "AlertWarning"
    if (isError) iconType = "AlertError"

    return iconType
  }

  const getIconFill = () => {
    if (isSuccess) return { fill: "#24A148" }
    if (isWarning) return { fill: "#F1C21B" }
    if (isError) return { fill: "#DA1E28" }
    return { fill: "#0043CE" }
  }

  return (
    <div className={`demio-info-box ${getClassExtension()} ${className}`} style={style}>
      <DemioIcon type={getIconType()} width={15} {...getIconFill()} />
      <div className={`demio-info-left ${showCloseIcon && !callToAction ? '--closable' : ''}`}>
        {message}
      </div>
      {callToAction && (
        <div className={`demio-info-right ${showCloseIcon ? '--closable' : ''}`}>
          {callToAction}
        </div>
      )}
      {showCloseIcon && (
        <span className="demio-info-close" onClick={onClose}>
          <DemioIcon type="Close" width={16} fill="#2C3336" />
        </span>
      )}
    </div>
  )
}

DemioInfo.propTypes = {
  message: oneOfType([string, node]).isRequired,
  className: string,
  isError: bool,
  isSuccess: bool,
  isWarning: bool,
  style: shape({}),
  onClose: func,
  showCloseIcon: bool
}

export default DemioInfo