import React from 'react';
import { Box, sprinkleVars, Text } from '@nova-hf/ui';
import { useTranslation } from 'utils/i18n';

type ConnectionStatusProps = {
  title: string;
  isConnected?: boolean;
  speed?: string;
};

export const ConnectionStatus = ({ title, isConnected, speed }: ConnectionStatusProps) => {
  const { t } = useTranslation('fiber');
  return (
    <Box display="flex" alignItems="center" marginBottom={1}>
      <Box
        display="inline-flex"
        width={1}
        height={1}
        background={isConnected ? 'success' : 'warning'}
        borderRadius="large"
        marginRight={1}
      />
      <Text variant="pSmallRegular">
        {title}
        {': '}
        {isConnected
          ? speed
            ? t('fiberBoxContent.ports.connected') + speed
            : t('fiberBoxContent.ports.connected')
          : t('fiberBoxContent.ports.disconnected')}
      </Text>
    </Box>
  );
};

type GlowingConnectionStatusProps = {
  description?: string;
} & ConnectionStatusProps;

export const GlowingConnectionStatus = ({
  title,
  description,
  isConnected,
}: GlowingConnectionStatusProps) => {
  return (
    <Box display="flex" alignItems="center">
      <Box display="flex" marginBottom="auto" alignItems="center">
        <Box
          display="inline-flex"
          width={1}
          height={1}
          background={isConnected ? 'success' : 'white'}
          borderStyle="solid"
          borderColor={isConnected ? 'success' : 'grey400'}
          borderWidth="1px"
          borderRadius="large"
          marginRight={1}
          {...(isConnected && {
            style: { boxShadow: `0px 0px 8px 0px ${sprinkleVars.themeColors.success}` },
          })}
        />
        <Text variant="pMediumBold" style={{ whiteSpace: 'nowrap' }}>
          {title}
        </Text>

        {description && (
          <Text variant="pMediumRegular" marginLeft={1}>
            -
          </Text>
        )}
      </Box>
      {description && (
        <Text variant="pMediumRegular" marginLeft={1}>
          {description}
        </Text>
      )}
    </Box>
  );
};