import React, {
  createContext,
  useContext,
  FC,
  useState,
  useEffect
} from 'react'

interface Metadata {
  title: string
}

const createDefaultMetadata = (): Metadata => ({
  title: ''
})

// return [metaData, setMetaData]
const useMetadata = () => useState<Metadata>(createDefaultMetadata())

const RouterMetaContext = createContext<ReturnType<typeof useMetadata>>(
  null as any
)

export const RouterMeta: FC<React.PropsWithChildren<{}>> = ({ children }) => {
  return (
    <RouterMetaContext.Provider value={useMetadata()} children={children} />
  )
}

// ensure that components can re-rendered by the key
// otherwise it will not re-render when there're multi RouterMetaInfo components
export const RouterMetaInfo: FC<React.PropsWithChildren<Partial<Metadata>>> = (
  props
) => {
  return <RouterMetaInfoImpl key={props.title} {...props} />
}

const RouterMetaInfoImpl: FC<React.PropsWithChildren<Partial<Metadata>>> = ({
  children,
  ...props
}) => {
  const [metadata, setMetadata] = useContext(RouterMetaContext)
  useEffect(() => {
    setMetadata({ ...metadata, ...props })
    return () => setMetadata(createDefaultMetadata())
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  return <>{children}</>
}

export const useRouterMeta = () => useContext(RouterMetaContext)[0]