import { Center, CloseButton, Input, Stack, Typography } from '@tidbcloud/uikit'
import { IconGlasses02, IconSearchMd } from '@tidbcloud/uikit/icons'
import { useMemo } from 'react'
import { useState } from 'react'

import { HeroComponent, isHeroQueryReady } from 'dbaas/components/Measurement'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { useIntegrationServiceListIntegrations2 } from 'dbaas/services/metricsIntegration'
import { V1IntegrationStatusResp, V1IntegrationType } from 'dbaas/services/metricsIntegration/interface'
import useStores from 'dbaas/stores/useStores'

import { RequestIntegration } from './features/RequestIntegration'
import { useIntegrationData } from './helper'
import { IntegrationGroup } from './IntegrationGroup'

export const IntegrationList = ({ cluster }: { cluster: SharedCluster }) => {
  const {
    store: { tenantData }
  } = useStores()
  const [searchValue, setSearchValue] = useState('')
  const {
    data: integrations,
    isFetched,
    isError,
    refetch
  } = useIntegrationServiceListIntegrations2(tenantData.id, cluster.id, {})
  const integrationMap = useMemo(
    () =>
      integrations?.items?.reduce<Partial<Record<V1IntegrationType, V1IntegrationStatusResp>>>((prev, current) => {
        if (current.type) {
          prev[current.type] = current
        }
        return prev
      }, {}) ?? {},
    [integrations?.items]
  )

  const data = useIntegrationData(cluster, searchValue, integrationMap, refetch)

  return (
    <Stack gap="xl" h="100%">
      <HeroComponent ready={isHeroQueryReady({ isFetched, isError })} />
      <Input
        w={260}
        placeholder="Search integration names"
        leftSection={<IconSearchMd />}
        value={searchValue}
        rightSectionPointerEvents="all"
        onChange={(e) => setSearchValue(e.currentTarget.value)}
        rightSection={
          <CloseButton
            aria-label="Clear input"
            onClick={() => setSearchValue('')}
            style={{ display: searchValue ? undefined : 'none' }}
          />
        }
      />
      {data.length === 0 ? (
        <Center h="100%">
          <Stack align="center">
            <IconGlasses02 size={48} />
            <Typography variant="title-lg">No results found.</Typography>
            <Typography variant="body-md">
              Not seeing what you need? Request an integration you'd like to use or try searching again.
            </Typography>
            <RequestIntegration actionText="Request an integration" buttonProps={{ variant: 'filled' }} />
          </Stack>
        </Center>
      ) : (
        <Stack pb="lg">
          {data.map((group) => (
            <IntegrationGroup data={group} />
          ))}
        </Stack>
      )}
    </Stack>
  )
}