import { jsonViewer, CATEGORIES } from '../../configuration/constants'
import { disableAllDescendantsDraggable } from '../../utils'

export default {
  // 组件名称
  name: jsonViewer,

  // 前面板 html 模板
  viewTemplate() {
    return `
      <div 
        class="${jsonViewer}-wrap" 
        data-gjs-type="${jsonViewer}"
      ></div>
    `
  },

  // 前面板 html 样式
  viewStyle() {
    return `
      <style>
        .${jsonViewer}-wrap {
          padding: 10px;
        }
  
        .${jsonViewer}-body {
          overflow: auto;
          min-width: 300px;
          max-width: 400px;
          max-height: 450px;
          border: 1px solid black;
          padding: 5px;
          margin: 3px 0;
        }

        .${jsonViewer}-message {
          font-size: smaller;
        }
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label: 'JSON显示',
      attributes: { class: 'fa fa-list-alt' }
    };
  },

  // 后面板显示属性配置
  spOptions() {
    // 接受一个 json string 类型, 如果不是 json 格式会进行提示
    return {
      label: 'JSON显示',
      icon: 'globe',
      docUrl: 'https://xuelangyun.yuque.com/docs/share/d3495921-0ff3-49a8-8df0-f1adb82d55eb?# 《JSON显示》',
      inPorts: [{
        uuid: 'in1',
        subType: 'json',
        description: {
          zh_CN: '输入JSON字符串'
        }
      }],
    }
  },

  componentOptions() {
    return {
      name: jsonViewer,
      resizable: true,
      dmode: 'absolute',
      droppable: false,
      // 暂时没配置
      traits: [],
    }
  },

  onModelScript() {
    const self = this
    const jsonViewerBody = self.querySelector('.json-viewer-body')
    const jsonViewerMessage = self.querySelector('.json-viewer-message')

    const mockData = {
      name: 'mockData',
      age: 10,
      male: true,
      data1: [1, '2', false],
      data2: [{
        text: 'text',
        num: 100,
        isTest: true
      }, {
        text: 'text2',
        num: 200,
        isTest: false
      }]
    }

    // mock 数据显示
    jsonViewerBody.innerHTML = JSON.stringify(mockData, null, 2)
    jsonViewerMessage.innerHTML = 'Valid JSON string!'
    jsonViewerMessage.style.color = 'lightseagreen'

    if (window.spSocket) {
      // 如果有数据源, 进行格式化
      const eventName = `call-` + self.getAttribute('id');

      window.spSocket.subscribe({
        eventName,
        callback: function(res) {
          if (res.data.in1) {
            try {
              const data = JSON.stringify(JSON.parse(res.data.in1), null, 2)
              jsonViewerBody.innerHTML = data
              jsonViewerMessage.innerHTML = 'Valid JSON string!'
              jsonViewerMessage.style.color = 'lightseagreen'
            } catch (e) {
              jsonViewerBody.innerHTML = res.data.in1
              jsonViewerMessage.innerHTML = 'Invalid JSON string, raw data displayed below'
              jsonViewerMessage.style.color = 'red'
            }
          }
        }
      })
    }
  },

  onViewInit() {
    const comps = this.model.get('components');

    if (!comps.length) {
      comps.reset();
      comps.add(`
        <span class="${jsonViewer}-message"></span>
        <pre class="${jsonViewer}-body"></pre>
      `)
    }
    const evn = ""
    this.listenTo(this.model, evn, this.updateScript)
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em))
  },

  onViewRender(editor, el, model) {
    // 阻止所有子元素被拖动
    disableAllDescendantsDraggable(el)
  }
}