import {
  createElement,
  forwardRef,
  useImperativeHandle,
  useState,
  useMemo,
  useRef,
  createRef,
  RefObject,
} from 'react'

import { extend } from './index'

import { createRoot } from 'react-dom/client'

export type AgentComponentRef<ComponentProps, ComponentImperativeHandle> = {
  $$setProps(props: ComponentProps, nocache?: boolean): void
} & ComponentImperativeHandle

export interface ImperativeOptions<ComponentProps> {
  component: any
  baseProps?: ComponentProps
  props?: ComponentProps
  afterRender?: () => void
}

export interface ImperativeCallbackOptions<
  ComponentProps,
  ComponentImperativeHandle
> {
  ref: RefObject<AgentComponentRef<ComponentProps, ComponentImperativeHandle>>
  unmount: () => any
  container: any
}

export interface ImperativeCallback<ComponentProps, ComponentImperativeHandle> {
  (
    options: ImperativeCallbackOptions<
      ComponentProps,
      ComponentImperativeHandle
    >
  ): ImperativeOptions<ComponentProps>
}

function createAgentComponent<ComponentProps, ComponentImperativeHandle>(
  component: any,
  baseProps: ComponentProps
) {
  return forwardRef((props: ComponentProps, ref) => {
    const [customProps, setCustomdProps] = useState<ComponentProps>(props)
    const oldProps = useRef<ComponentProps | any>({})
    const componentRef = useRef<ComponentImperativeHandle>(null)

    const mergedProps = useMemo(() => {
      const props = extend({}, customProps, baseProps)
      return Object.assign(oldProps.current, props)
    }, [customProps])

    useImperativeHandle(
      ref,
      () =>
        ({
          $$setProps(props, nocache) {
            if (nocache) {
              oldProps.current = {}
              setCustomdProps(props)
            } else {
              ;(Object.keys(props as any) as (keyof ComponentProps)[]).some(
                (k) => {
                  if (props[k] !== oldProps.current[k]) {
                    setCustomdProps(props)
                    return true
                  }
                }
              )
            }
          },
          ...componentRef.current,
        } as AgentComponentRef<ComponentProps, ComponentImperativeHandle>)
    )

    return createElement(component, {
      ...mergedProps,
      ref: componentRef,
    })
  })
}

// 命令式组件
// # 功能
// - 不缓存
// - 基础 props

export function imperative<ComponentProps, ComponentImperativeHandle>(
  callback: ImperativeCallback<ComponentProps, ComponentImperativeHandle>
): RefObject<AgentComponentRef<ComponentProps, ComponentImperativeHandle>> {
  const container = document.createElement('div')
  document.body.appendChild(container)

  const unmount = () => {
    setTimeout(() => {
      root.unmount()
      document.body.removeChild(container)
    })
  }

  const ref =
    createRef<AgentComponentRef<ComponentProps, ComponentImperativeHandle>>()
  const { component, baseProps, props, afterRender } = callback({
    ref,
    unmount,
    container,
  })

  const element = createElement(
    createAgentComponent<ComponentProps, ComponentImperativeHandle>(component, {
      ...baseProps,
    } as ComponentProps),
    {
      ...props,
      ref,
    } as any
  )

  const root = createRoot(container)
  root.render(element)

  setTimeout(() => {
    afterRender?.()
  })
  return ref
}