import { useParams } from 'common'
import { Badge } from 'ui'

import { IntegrationOverviewTab } from '../Integration/IntegrationOverviewTab'
import { isWarehouseProvisioned } from './Warehouse.utils'
import { WarehouseSetupPanel } from './WarehouseSetupPanel'
import { useIsMarketplaceEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { useWarehouseSetupStatusQuery } from '@/data/warehouse/warehouse-setup-status-query'

export const WarehouseOverviewTab = () => {
  const { ref } = useParams()
  const isMarketplaceEnabled = useIsMarketplaceEnabled()

  const { data: isProvisioned } = useWarehouseSetupStatusQuery(
    { projectRef: ref },
    { select: (data) => isWarehouseProvisioned(data?.setup_status) }
  )

  // The marketplace shell supplies its own padding, so returning the content bare avoids
  // double-padding it.
  if (isMarketplaceEnabled) return <WarehouseSetupPanel />

  return (
    <IntegrationOverviewTab
      status={isProvisioned ? <Badge variant="success">Enabled</Badge> : undefined}
    >
      <div className="px-4 md:px-10 max-w-4xl space-y-4">
        <WarehouseSetupPanel />
      </div>
    </IntegrationOverviewTab>
  )
}