import React, { useEffect, useRef } from 'react'
import { Tooltip } from 'antd'
import { FullscreenOutlined } from '@ant-design/icons'
import * as monaco from 'monaco-editor'

interface IProps {
  height?: number
  readOnly?: boolean
}

const Index: React.FC<IProps> = (props: any) => {
  const { value, onChange, height = 500, readOnly } = props
  const monacoEditorRef = useRef<any>()
  const domRef = useRef<any>()

  useEffect(() => {
    newMonaco()
    return () => {
      monacoEditorRef.current?.dispose() // 卸载编辑器
      monacoEditorRef.current = undefined
    }
  }, [])

  useEffect(() => {
    try {
      monacoEditorRef?.current?.setValue(value)
    } catch {}
  }, [value])

  const newMonaco = () => {
    try {
      monacoEditorRef.current = monaco?.editor?.create(domRef.current, {
        language: 'json', // 编辑器类型支持
        minimap: { enabled: false }, // 小地图
        automaticLayout: true, // 自动布局,
        codeLens: true,
        colorDecorators: true,
        contextmenu: false,
        readOnly: readOnly, //是否只读
        formatOnPaste: true,
        overviewRulerBorder: false, // 滚动条的边框
        scrollBeyondLastLine: true,
        theme: 'vs-dark', // 主题
        fontSize: 14, // 字体
        wordWrap: 'on' // 换行
      })
      monacoEditorRef.current.onDidBlurEditorText(async () => {
        onChange(monacoEditorRef.current.getValue())
      })
    } catch {}
  }

  const fullscreenStyle = {
    display: 'flex',
    flexDirection: 'row-reverse',
    position: 'absolute',
    top: -25,
    right: 5,
    zIndex: 999,
    fontSize: 'large',
    fontWeight: 'bold'
  }

  return (
    <div style={{ position: 'relative' }}>
      <div style={fullscreenStyle}>
        <Tooltip title='全屏编辑'>
          <FullscreenOutlined
            onClick={() => {
              if (document.fullscreenElement) {
                document.exitFullscreen()
              } else {
                domRef.current.requestFullscreen()
              }
            }}
          />
        </Tooltip>
      </div>
      <div ref={domRef} style={{ minHeight: 500, height }} />
    </div>
  )
}

export default Index