dify/web/app/components/integrations/hooks/use-tool-marketplace-panel.ts

import type { RefObject } from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import { useMarketplace } from '@/app/components/tools/marketplace/hooks'

type UseToolMarketplacePanelParams = {
  containerRef: RefObject<HTMLDivElement | null>
  keywords: string
  tagFilterValue: string[]
}

export function useToolMarketplacePanel({
  containerRef,
  keywords,
  tagFilterValue,
}: UseToolMarketplacePanelParams) {
  const toolListTailRef = useRef<HTMLDivElement>(null)
  const marketplaceContext = useMarketplace(keywords, tagFilterValue)
  const { handleScroll } = marketplaceContext
  const [isMarketplaceArrowVisible, setIsMarketplaceArrowVisible] = useState(true)

  const showMarketplacePanel = useCallback(() => {
    containerRef.current?.scrollTo({
      top: toolListTailRef.current ? toolListTailRef.current.offsetTop - 80 : 0,
      behavior: 'smooth',
    })
  }, [containerRef])

  const onContainerScroll = useCallback(
    (e: Event) => {
      handleScroll(e)
      if (containerRef.current && toolListTailRef.current)
        setIsMarketplaceArrowVisible(
          containerRef.current.scrollTop < toolListTailRef.current.offsetTop - 80,
        )
    },
    [containerRef, handleScroll],
  )

  useEffect(() => {
    const container = containerRef.current
    if (container) container.addEventListener('scroll', onContainerScroll)

    return () => {
      if (container) container.removeEventListener('scroll', onContainerScroll)
    }
  }, [onContainerScroll])

  return {
    containerRef,
    isMarketplaceArrowVisible,
    marketplaceContext,
    showMarketplacePanel,
    toolListTailRef,
  }
}