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

const ENTITY_TYPE = 'IMAGE'
const BLOCK_TYPE = 'atomic'

export default createPlugin({
  htmlToBlock: (nodeName: any, node: any, lastList: any, inBlock: any) => {
    if (nodeName === 'figure' && node.firstChild.nodeName === 'IMG' || (nodeName === 'img' && inBlock !== BLOCK_TYPE)) {
      return BLOCK_TYPE
    }
  },
  htmlToEntity: (nodeName: any, node: any) => {
    if (nodeName === 'img') {
      return Entity.create(ENTITY_TYPE, 'IMMUTABLE', { src: node.getAttribute('src') })
    }
  },
  blockRendererFn: (block: any) => {
    if (block.getType() === 'atomic' && block.length > 0 && Entity.get(block.getEntityAt(0)).getType() === ENTITY_TYPE) {
      return {
        component: ({ block }: any) => {
          const { src } = Entity.get(block.getEntityAt(0)).getData()
          return <img src={src} />
        },
        editable: false
      }
    }
  },
  blockToHTML: {
    atomic: {
      start: '',
      end: ''
    }
  },
  entityToHTML: (entity: any) => {
    if (entity.type === ENTITY_TYPE) {
      return `<img style="max-width: 230px;" src="${entity.data.src}" />`
    }
  },
})