import { Box, HoverCard, Stack, Typography } from '@tidbcloud/uikit'
import { PropertyCard } from '@tidbcloud/uikit/biz'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'
import { Fragment, useMemo } from 'react'

import { getTopicDistributionModeOptions, partitionDistributionOptions } from 'dbaas/features/Changefeed/constants'
import { ConsoleapiTopicPartitionConfig, DataflowTopicPartitionConfig } from 'dbaas/services/dataflow/interface'

type TopicPartitionConfig = DataflowTopicPartitionConfig | ConsoleapiTopicPartitionConfig

export function TopicDistributionProperties({ data }: { data?: TopicPartitionConfig }) {
  const modes = useMemo(() => getTopicDistributionModeOptions(), [])

  return (
    <>
      <PropertyCard.Item label="Topic Partition">
        <Box component="span" mr={8}>
          {modes.find((i) => i.value === data?.dispatch_type)?.label}
        </Box>

        <HoverCard shadow="md" withArrow withinPortal>
          <HoverCard.Target>
            <Box component={IconInfoCircle} size={14} pos="relative" top={2} />
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Stack>
              {data?.default_topic && <PropertyCard.Item label="Topic Name">{data?.default_topic}</PropertyCard.Item>}

              {data?.topic_prefix && <PropertyCard.Item label="Topic Prefix">{data?.topic_prefix}</PropertyCard.Item>}
              {data?.separator && <PropertyCard.Item label="Topic Separator">{data?.separator}</PropertyCard.Item>}
              {data?.topic_suffix && <PropertyCard.Item label="Topic Suffix">{data?.topic_suffix}</PropertyCard.Item>}

              {data?.partition_dispatchers && (
                <PropertyCard.Item label="Partition Dispatcher">
                  <Box sx={{ display: 'grid', gridTemplateColumns: 'fit-content(50%) 1fr', gap: 4 }}>
                    {data?.partition_dispatchers?.map((i, index) => (
                      <Fragment key={index}>
                        <Typography>
                          {i.matcher?.join(',')}
                          {' :'}
                        </Typography>

                        <Typography>
                          {[
                            partitionDistributionOptions.find((j) => j.value === i.partition_type)?.text,
                            i.index_name,
                            i.columns?.join(',')
                          ]
                            .filter(Boolean)
                            .join(', ')}
                        </Typography>
                      </Fragment>
                    ))}
                  </Box>
                </PropertyCard.Item>
              )}

              {data?.replication_factor && (
                <PropertyCard.Item label="Replication Factor">{data.replication_factor}</PropertyCard.Item>
              )}
              {data?.partition_num && (
                <PropertyCard.Item label="Partition Number">{data.partition_num}</PropertyCard.Item>
              )}
            </Stack>
          </HoverCard.Dropdown>
        </HoverCard>
      </PropertyCard.Item>
    </>
  )
}