import { Alert, Stack } from '@tidbcloud/uikit'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'
import { useMount } from 'ahooks'
import { observer } from 'mobx-react'
import { useCallback, useState } from 'react'
import { Route, Switch } from 'react-router'

import { HeroComponent } from 'dbaas/components/Measurement'
import { CentralIntegrationStatusResp, CentralIntegrationType, listIntegrations } from 'dbaas/services'
import useStores from 'dbaas/stores/useStores'

import Datadog from './datadog'
import NewRelic from './newrelic'
import Prometheus from './prometheus'
import { useIntegrationMigrationStatus } from './useIntegrationMigrationStatus'
import ZaiperContainer from './ZapierContainer'

export const AWSBedrockAndVercelIntegration = () => {
  return (
    <Alert icon={<IconInfoCircle />} color="peacock">
      AWS Bedrock and Vercel integrations are now managed at the cluster level. Select a specific cluster to view and
      configure settings.
    </Alert>
  )
}

export const IntegrationPanel = observer(() => {
  const {
    store: { tenantData, activeProject: project }
  } = useStores()
  const [integrations, setIntegrations] = useState<CentralIntegrationStatusResp[]>([])

  const fetchIntegrations = useCallback(() => {
    listIntegrations(tenantData.id, project.id, {
      type: 'INTEGRATION_TYPE_UNSPECIFIED'
    })
      .then((data) => {
        setIntegrations(data.items)
      })
      .catch((e) => {
        console.error(e)
      })
  }, [tenantData.id, project.id])

  const integrationMap = integrations.reduce<{
    [index: string]: CentralIntegrationStatusResp
  }>((prev, current) => {
    prev[current.type] = current
    return prev
  }, {})

  const isDatadogEnabled = useIntegrationMigrationStatus('integration_datadog', true)
  const isNewRelicEnabled = useIntegrationMigrationStatus('integration_new_relic', true)
  const isPrometheusEnabled = useIntegrationMigrationStatus('integration_prometheus', true)

  useMount(() => {
    fetchIntegrations()
  })

  return (
    <div>
      <HeroComponent />
      <Switch>
        <Route path="/project/integrations">
          <Stack gap="md">
            <AWSBedrockAndVercelIntegration />
            {isDatadogEnabled && (
              <Datadog
                integration={integrationMap[CentralIntegrationType.INTEGRATION_TYPE_DATADOG] || null}
                project={project}
                onConfirmed={fetchIntegrations}
              />
            )}
            {isPrometheusEnabled && <Prometheus project={project} />}
            {isNewRelicEnabled && (
              <NewRelic
                integration={integrationMap[CentralIntegrationType.INTEGRATION_TYPE_NEWRELIC] || null}
                project={project}
                onConfirmed={fetchIntegrations}
              />
            )}
            <ZaiperContainer />
          </Stack>
        </Route>
      </Switch>
    </div>
  )
})

export default IntegrationPanel