import { Button, HoverCard } from '@tidbcloud/uikit'
import { useEffect } from 'react'
import { Link } from 'react-router-dom'

import config from 'config'
import { AccessDeniedHoverHint } from 'dbaas/contexts/access-control/ui/AccessDeniedHoverHint'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import {
  ResourceInsufficientAlert,
  useResourceInsufficientClusterById
} from 'dbaas/features/ClusterManagement/dedicated/ResourceInsufficient'
import { useModifyStatus } from 'dbaas/screens/Cluster/ClusterItem/ListItem'
import { ClusterPageShell } from 'dbaas/screens/ClusterV2/components'

import { NodeMap } from './NodeMap'

const NodesPageShell = ({ cluster }: { cluster: SharedCluster }) => {
  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Nodes`
  }, [])
  const { disableModify, modifyTips } = useModifyStatus(cluster)

  const insufficientCluster = useResourceInsufficientClusterById(cluster.id)
  return (
    <ClusterPageShell
      wrapperProps={{
        display: 'flex',
        h: '100%',
        sx: {
          flexDirection: 'column'
        }
      }}
      headerProps={{
        rightSection: (
          <HoverCard disabled={!disableModify}>
            <HoverCard.Target>
              <div>
                <AccessDeniedHoverHint id="ClusterModifyGate">
                  {({ accessible }) => (
                    <Button
                      h={32}
                      component={disableModify ? undefined : Link}
                      disabled={disableModify || !accessible}
                      to={`/clusters/${cluster?.id}/modifying`}
                      data-mp-event="Modify Cluster Button Clicked"
                      data-mp-source="Nodes Map Page"
                      sx={(theme) => ({
                        '&:hover': {
                          color: theme.white,
                          textDecoration: 'none'
                        }
                      })}
                    >
                      Modify
                    </Button>
                  )}
                </AccessDeniedHoverHint>
              </div>
            </HoverCard.Target>
            <HoverCard.Dropdown>{modifyTips}</HoverCard.Dropdown>
          </HoverCard>
        )
      }}
      bodyProps={{
        sx: { flex: 1, minHeight: 0 }
      }}
      title="Node Map"
    >
      {insufficientCluster && (
        <ResourceInsufficientAlert
          state={insufficientCluster.dedicatedCluster?.state}
          name={insufficientCluster.dedicatedCluster?.displayName}
        />
      )}
      <NodeMap cluster={cluster} />
    </ClusterPageShell>
  )
}

export default NodesPageShell