import React, {ComponentType} from 'react'
import {useShallow} from 'zustand/react/shallow'
import {AnnotationApiShape} from './AnnotationApi'
import hoistNonReactStatics from 'hoist-non-react-statics'

export const zustandConnect = (useStore: any, selector: (state: AnnotationApiShape) => any) => {
  return (Component: ComponentType) => {
    const forwarded = React.forwardRef(
      (props, ref) => (
        <Component
          ref={ref}
          {...props}
          {...useStore(useShallow(selector))}
        />
      )
    )
    return hoistNonReactStatics(forwarded, Component)
  }
}