import {
  CLOSE_ICON,
  CREDIFY_FOOTER_LOGO,
  PROMOTION_BANNER_IMAGE,
} from "./constant"
import { style } from "./style"

declare type PromotionOfferModalProps = {
  onClick: () => void
}

declare type Element = {
  closeIcon: HTMLElement
  promotionBanner: HTMLElement
  container: HTMLElement
}

const createPromotionOfferModal = (props: PromotionOfferModalProps) => {
  const element = initUi()
  bindEvent(element, props)

  return element.container
}

const initUi = () => {
  const style = createStyle()
  document.head.appendChild(style)

  const container = createPromotionWrapper()

  const closeIcon = createCloseIcon()
  container.appendChild(closeIcon)

  const promotionContent = createPromotionContent()
  container.appendChild(promotionContent)

  const promotionBanner = createPromotionBanner()
  promotionContent.appendChild(promotionBanner);

  const credifyFooter = createCredifyFooter()
  container.appendChild(credifyFooter)

  return {
    container,
    closeIcon,
    promotionBanner,
  }
}

const createStyle = () => {
  const result = document.createElement("style")
  const styleNode = document.createTextNode(style)
  result.appendChild(styleNode)
  return result
}

const createPromotionWrapper = () => {
  const result = document.createElement("div")
  result.className = "promotion-wrapper"
  return result
}

const createCloseIcon = () => {
  const result = document.createElement("div")
  result.innerHTML = CLOSE_ICON
  result.className = "promotion-close-icon"
  return result
}

const createPromotionContent = () => {
  const result = document.createElement("div")
  result.className = "promotion-content"
  return result
}

const createPromotionBanner = () => {
  const result = document.createElement("div")
  result.className = "promotion-banner"

  const image = document.createElement("img")
  image.src = PROMOTION_BANNER_IMAGE
  image.className = "promotion-banner-image"
  result.appendChild(image)
  return result
}

const createCredifyFooter = () => {
  const result = document.createElement("div")
  result.className = "promotion-footer"
  result.innerHTML = CREDIFY_FOOTER_LOGO
  return result
}

const closeModal = (rootElm: HTMLElement) => {
  document.body.removeChild(rootElm)
}

const bindEvent = (element: Element, props: PromotionOfferModalProps) => {
  const { closeIcon, promotionBanner, container } = element
  closeIcon.onclick = () => closeModal(container);

  promotionBanner.onclick = () => {
    props.onClick()
    closeModal(container)
  }

}

export default createPromotionOfferModal