import { Typography, Menu, ActionIcon, Box, Text, HoverCard } from '@tidbcloud/uikit'
import { ProTable, MRT_ColumnDef } from '@tidbcloud/uikit/biz'
import { IconDotsHorizontal } from '@tidbcloud/uikit/icons'
import { PropsWithChildren, useMemo } from 'react'

import { EntityAlertSubscribersItem, EntityAlertSubscriberType } from 'dbaas/services/clinicService/interface'
import { eventTracking } from 'dbaas/utils/tracking'

const EllipsisTypography = ({
  width,
  withTooltip,
  children
}: PropsWithChildren<{ width: number; withTooltip?: boolean }>) => {
  return (
    <HoverCard disabled={!withTooltip} position="bottom" withinPortal shadow="md">
      <HoverCard.Target>
        <Box w={width}>
          <Text truncate>{children}</Text>
        </Box>
      </HoverCard.Target>

      <HoverCard.Dropdown>
        <Text>{children}</Text>
      </HoverCard.Dropdown>
    </HoverCard>
  )
}

const emailColumns: MRT_ColumnDef<EntityAlertSubscribersItem>[] = [
  {
    id: 'email',
    header: 'Subscriber Email Address',
    accessorKey: 'email',
    size: 700,
    accessorFn: (d) => <EllipsisTypography width={700}>{d.email}</EllipsisTypography>
  }
]

const slackColumns: MRT_ColumnDef<EntityAlertSubscribersItem>[] = [
  {
    id: 'name',
    header: 'Subscriber Name',
    accessorKey: 'name',
    size: 200,
    accessorFn: (d) => <EllipsisTypography width={200}>{d.name}</EllipsisTypography>
  },
  {
    id: 'url',
    header: 'URL',
    accessorKey: 'slackUrl',
    size: 530,
    accessorFn: (d) => (
      <EllipsisTypography width={500} withTooltip>
        {d.slackUrl}
      </EllipsisTypography>
    )
  }
]

const zoomColumns: MRT_ColumnDef<EntityAlertSubscribersItem>[] = [
  {
    id: 'name',
    header: 'Subscriber Name',
    accessorKey: 'name',
    size: 200,
    accessorFn: (d) => <EllipsisTypography width={200}>{d.name}</EllipsisTypography>
  },
  {
    id: 'url',
    header: 'URL',
    accessorKey: 'zoomUrl',
    size: 530,
    accessorFn: (d) => (
      <EllipsisTypography width={500} withTooltip>
        {d.zoomUrl}
      </EllipsisTypography>
    )
  }
]

const flashDutyColumns: MRT_ColumnDef<EntityAlertSubscribersItem>[] = [
  {
    id: 'name',
    header: 'Subscriber Name',
    accessorKey: 'name',
    size: 200,
    accessorFn: (d) => <EllipsisTypography width={200}>{d.name}</EllipsisTypography>
  },
  {
    id: 'url',
    header: 'Webhook URL',
    accessorKey: 'flashDutyUrl',
    size: 530,
    accessorFn: (d) => (
      <EllipsisTypography width={500} withTooltip>
        {d.flashDutyUrl}
      </EllipsisTypography>
    )
  }
]

const pagerDutyColumns: MRT_ColumnDef<EntityAlertSubscribersItem>[] = [
  {
    id: 'name',
    header: 'Subscriber Name',
    accessorKey: 'name',
    size: 200,
    accessorFn: (d) => <EllipsisTypography width={200}>{d.name}</EllipsisTypography>
  },
  {
    id: 'integrationKey',
    header: 'Integration Key',
    accessorKey: 'pagerDutyKey',
    size: 530,
    accessorFn: (d) => (
      <EllipsisTypography width={500} withTooltip>
        {d.pagerDutyKey}
      </EllipsisTypography>
    )
  }
]

const webhookColumns: MRT_ColumnDef<EntityAlertSubscribersItem>[] = [
  {
    id: 'name',
    header: 'Subscriber Name',
    accessorKey: 'name',
    size: 200,
    accessorFn: (d) => <EllipsisTypography width={200}>{d.name}</EllipsisTypography>
  },
  {
    id: 'url',
    header: 'Webhook URL',
    accessorKey: 'webhookUrl',
    size: 530,
    accessorFn: (d) => (
      <EllipsisTypography width={500} withTooltip>
        {d.webhookUrl}
      </EllipsisTypography>
    )
  }
]

const larkWebhookColumns: MRT_ColumnDef<EntityAlertSubscribersItem>[] = [
  {
    id: 'name',
    header: 'Subscriber Name',
    accessorKey: 'name',
    size: 160,
    accessorFn: (d) => <EllipsisTypography width={160}>{d.name}</EllipsisTypography>
  },
  {
    id: 'url',
    header: 'Webhook URL',
    accessorKey: 'larkWebhookUrl',
    size: 390,
    accessorFn: (d) => (
      <EllipsisTypography width={360} withTooltip>
        {d.larkWebhookUrl}
      </EllipsisTypography>
    )
  },
  {
    id: 'secret',
    header: 'Secret',
    accessorKey: 'larkSecret',
    size: 180,
    accessorFn: (d) => (
      <EllipsisTypography width={150} withTooltip>
        {d.larkSecret}
      </EllipsisTypography>
    )
  }
]

const SubscribersTable = ({
  accessible,
  showActions = accessible,
  type,
  subscribers,
  unsubscribe,
  loading = false,
  tidbEntityName = 'instance'
}: {
  accessible: boolean
  showActions?: boolean
  type: EntityAlertSubscriberType
  subscribers: EntityAlertSubscribersItem[]
  unsubscribe?: (subscriber: EntityAlertSubscribersItem) => void
  loading?: boolean
  // use 'instance' for TiDB instance pages, 'cluster' only where legacy dedicated wording is required
  tidbEntityName?: 'instance' | 'cluster'
}) => {
  const baseColumns: MRT_ColumnDef<EntityAlertSubscribersItem>[] = [
    {
      id: 'scope',
      header: 'Scope',
      size: 200,
      accessorFn: () => {
        return <Typography variant="body-lg">All alerts in current {tidbEntityName}</Typography>
      }
    },
    {
      id: 'actions',
      header: '',
      size: 50,
      accessorFn: (row) => {
        return (
          <Menu position="bottom">
            <Menu.Target>
              <ActionIcon size={32}>
                <IconDotsHorizontal size={16} />
              </ActionIcon>
            </Menu.Target>
            <Menu.Dropdown>
              <Menu.Item
                disabled={!accessible}
                onClick={() => {
                  eventTracking('Alerts Subscription Unsubscribe Modal Opened')
                  unsubscribe?.(row)
                }}
              >
                Unsubscribe
              </Menu.Item>
            </Menu.Dropdown>
          </Menu>
        )
      }
    }
  ]

  const additionColumns = useMemo(() => {
    switch (type) {
      case EntityAlertSubscriberType.SLACK:
        return slackColumns
      case EntityAlertSubscriberType.ZOOM:
        return zoomColumns
      case EntityAlertSubscriberType.FLASHDUTY:
        return flashDutyColumns
      case EntityAlertSubscriberType.PAGERDUTY:
        return pagerDutyColumns
      case EntityAlertSubscriberType.WEBHOOK:
        return webhookColumns
      case EntityAlertSubscriberType.LARK:
        return larkWebhookColumns
      default:
        return emailColumns
    }
  }, [type])

  const columns = [...additionColumns, ...baseColumns]

  return (
    <ProTable<EntityAlertSubscribersItem>
      columns={columns}
      data={subscribers}
      state={{
        isLoading: loading,
        columnVisibility: {
          actions: showActions
        }
      }}
    />
  )
}

export default SubscribersTable