import React from 'react'
import { loadMicroApp } from 'qiankun'
import { AppContext } from '../../../App'

export const DataQualityFeighTagSelect = 'data-quality-feign-tag-select'
export const DataQualityFeignTagList = 'data-quality-feign-tag-list'

const FC = ({ type, data, onChange }) => {
  const containerRef = React.useRef()
  const microApp = React.useRef()
  const app = React.useContext(AppContext)

  React.useEffect(() => {
    if (containerRef.current) {
      microApp.current = loadMicroApp(
        { 
          name: 'data-quality', 
          entry: '/data-quality/',
          container: containerRef.current,
          props: { 
            ...app||{},
            type,
            data,
            onChange
          },
        },
      );
    }

    return () => {
      microApp.current?.unmount()
    }
  }, [])

  React.useEffect(() => {
    function updateMicroApp() {
      if (microApp.current?.update) {
        setTimeout(() => {
          microApp.current?.update?.({ type, data })
        }, 100)
      } else {
        setTimeout(() => {
          updateMicroApp()
        }, 100)
      }
    }

    updateMicroApp()
  }, [type, data])

  return (
    <div ref={containerRef} style={{ width: '100%', height: '100%' }} />
  );
}

export default FC