import { Button, HoverCard, Typography } from '@tidbcloud/uikit'
import { IconAlertCircle } from '@tidbcloud/uikit/icons'

import { AccessDeniedHoverHint } from 'dbaas/contexts/access-control'

import { maintenanceWindoAccesswKey } from './const'
import { useMaintenanceWindowContext } from './context'

const WindowSetting = () => {
  const { setEditModalOpened } = useMaintenanceWindowContext()

  return (
    <AccessDeniedHoverHint
      id={maintenanceWindoAccesswKey}
      reason={{
        targetWrapperProps: {
          sx: {
            position: 'absolute',
            right: 0,
            top: -6
          }
        }
      }}
    >
      {({ accessible }) => (
        <Button
          variant="default"
          size="compact-lg"
          sx={{
            position: 'absolute',
            right: 24,
            top: -44,
            zIndex: 99
          }}
          disabled={!accessible}
          rightSection={
            <HoverCard withArrow shadow="md" position="top" width={400}>
              <HoverCard.Target>
                <IconAlertCircle />
              </HoverCard.Target>
              <HoverCard.Dropdown>
                <Typography variant="body-lg">
                  Maintenance windows allow scheduled updates to enhance service reliability and performance with
                  minimal disruption. See{' '}
                  <a
                    href="https://docs.pingcap.com/tidbcloud/configure-maintenance-window"
                    target="_blank"
                    rel="noreferrer"
                  >
                    Maintenance Window
                  </a>{' '}
                  for more details.
                </Typography>
              </HoverCard.Dropdown>
            </HoverCard>
          }
          onClick={() => setEditModalOpened(true)}
        >
          Maintenance Window Setting
        </Button>
      )}
    </AccessDeniedHoverHint>
  )
}

export default WindowSetting