import { Alert, Box, Flex, HoverCard, Typography } from '@tidbcloud/uikit'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'

import { useDataApiContext, AutoSaveStateEnum } from '../context'
import { usePathErrMsg } from '../Panel/Properties'

const EndpointMessageBar = () => {
  const { autoSaveState, autoSaveErrorMsg, conflictEndpointId, editEndpoint, isPathErr, endpointDeployMsg } =
    useDataApiContext()

  const pathErrMsg = usePathErrMsg()

  if (conflictEndpointId && conflictEndpointId === `${editEndpoint?.id}`) {
    return null
  }

  return (
    <>
      {autoSaveErrorMsg && autoSaveState === AutoSaveStateEnum.Failed && (
        <Alert
          m="8px 12px 0"
          color="red"
          styles={() => ({
            root: {
              padding: '8px 8px 8px 16px'
            }
          })}
        >
          <Typography>{autoSaveErrorMsg}</Typography>
        </Alert>
      )}

      {isPathErr && (
        <Alert
          m="8px 12px 0"
          color="red"
          styles={() => ({
            root: {
              padding: '8px 8px 8px 16px'
            }
          })}
        >
          <Typography>{pathErrMsg}</Typography>
        </Alert>
      )}

      {!!endpointDeployMsg && (
        <Alert
          m="8px 12px 0"
          color="red"
          styles={() => ({
            root: {
              padding: '8px 8px 8px 16px',
              overflow: 'visible'
            }
          })}
        >
          <Flex align="center">
            The endpoint {editEndpoint?.name} deployment has failed
            <HoverCard width={400} withArrow position="top" shadow="md">
              <HoverCard.Target>
                <Box component={IconInfoCircle} size={14} c="red.9" ml={2} sx={{ cursor: 'pointer' }}></Box>
              </HoverCard.Target>
              <HoverCard.Dropdown>
                <Typography variant="body-md">{endpointDeployMsg}</Typography>
              </HoverCard.Dropdown>
            </HoverCard>
          </Flex>
        </Alert>
      )}
    </>
  )
}

export default EndpointMessageBar