import * as React from 'react'
import { Entity } from 'draft-js'
import { createPlugin, pluginUtils } from 'draft-extend'

const ENTITY_TYPE = 'LINK'

const LinkDecorator = {
  strategy: pluginUtils.entityStrategy(ENTITY_TYPE),
  component: (props: any) => {
    const entity = Entity.get(props.entityKey)
    const { href, target } = entity.getData()
    return (
      <a href={href} target={target}>
        {props.children}
      </a>
    )
  }
}

const htmlToEntity = (nodeName: any, node: any) => {
  if (nodeName === 'a') {
    return Entity.create(
      ENTITY_TYPE,
      'MUTABLE',
      {
        href: node.getAttribute('href'),
        target: node.getAttribute('target')
      }
    )
  }
}

const entityToHTML = (entity: any, originalText: any) => {
  if (entity.type === ENTITY_TYPE) {
    return `<a href="${entity.data.href}" target="${entity.data.target}">${originalText}</a>`
  }
  return originalText
}

export default createPlugin({
  displayName: 'LinkPlugin',
  decorators: LinkDecorator,
  htmlToEntity,
  entityToHTML,
})