import React, {useEffect, useRef} from 'react'
import ReactDOM from 'react-dom'
import {ReactEditor} from '5e-slate-react'
import WWOpenDataComponent from '../../component/open_data'
import {SPortalImg} from './index.style'

export const Portal = ({children}: any) => {
  return typeof document === 'object' ? ReactDOM.createPortal(children, document.body) : null
}
const DEFAULT_URL = 'http://fox-table.oss-cn-shenzhen.aliyuncs.com/assets/default_avatar.png'
const MentionsItem = (props: any) => {
  const ref = useRef<HTMLDivElement | null>()
  const {editor, index, search, target, chars, mentionPosition} = props
  useEffect(() => {
    if (target) {
      const el = ref.current
      const domRange = ReactEditor.toDOMRange(editor, target)
      const rect = domRange.getBoundingClientRect()
      if (mentionPosition?.top && mentionPosition?.right) {
        el!.style.top = `${rect.top + window.pageYOffset - el?.clientHeight!}px`
        el!.style.left = `${rect.left + window.pageXOffset}px`
      } else {
        el!.style.top = `${rect.top + window.pageYOffset + 24}px`
        el!.style.left = `${rect.left + window.pageXOffset}px`
      }
    }
  }, [editor, index, search, target, chars])
  return (
    <Portal>
      <div
        className="portal-mention-wrapper"
        ref={c => (ref.current = c)}
        style={{
          top: '-9999px',
          left: '-9999px',
          position: 'absolute',
          zIndex: 9999,
          padding: '8px',
          background: 'white',
          borderRadius: '4px',
          boxShadow: '0 1px 5px rgba(0,0,0,.2)',
          fontSize: '16px',
          maxHeight: '328px',
          width: '160px',
          overflowY: 'hidden',
        }}>
        {chars?.map((char: any, i: any) => (
          <div
            className="portal-mention-item"
            key={i}
            style={{
              background: i === index ? '#F4F5F8' : 'transparent',
            }}>
            {/* {char} */}
            <SPortalImg
              onClick={() => {
                props.clickItem(i)
              }}>
              <img className="portal-mention-img" src={char?.avatar || DEFAULT_URL} />
              <WWOpenDataComponent openid={char?.openId} type={char?.type} />
            </SPortalImg>
          </div>
        ))}
      </div>
    </Portal>
  )
}

export default MentionsItem