import React from 'react'

import { Html } from 'slate'

const BLOCK_TAGS = {

  p: 'paragraph',

}

// Add a dictionary of mark tags.

const MARK_TAGS = {

  em: 'italic',

  strong: 'bold',

  u: 'underline',

  category: 'span'

}

const rules = [

  // Block rules

  {

    deserialize(el, next) {

      const type = BLOCK_TAGS[el.tagName]

      if (!type) return

      return {

        kind: 'block',

        type: type,

        nodes: next(el.children)

      }

    },

    serialize(object, children) {

      if (object.kind !== 'block') return

      switch (object.type) {

        case 'paragraph':

        case 'line': return <p>{children}</p>

        default: return;

      }

    }

  },

  // Mark rules

  {

    deserialize(el, next) {

      const type = MARK_TAGS[el.tagName]

      if (!type) return

      return {

        kind: 'mark',

        type: type,

        nodes: next(el.children)

      }

    },

    serialize(object, children) {

      if (object.kind !== 'mark') return

      switch (object.type) {

        case 'bold': return <strong>{children}</strong>

        case 'italic': return <em>{children}</em>

        case 'underline': return <u>{children}</u>

        case 'category': return <span style={{ backgroundColor: object.data.get('color') }}>{children}</span>

        default: return;

      }

    }

  }

]

const serializer = new Html({ rules })

export default serializer