import { getBadgeConnection } from '@/components/shared/ThingShared';
import { useIntl } from '@umijs/max';
import { Flex, Typography } from 'antd';
import moment from 'moment';
const { Text, Title } = Typography;
const ThingTitle = ({ thing }: { thing: MasterModel.Thing | null }) => {
  const intl = useIntl();
  if (thing === null) {
    return <Text>{intl.formatMessage({ id: 'common.undefined' })}</Text>;
  }

  const connectionDuration = thing.metadata!.connected
    ? thing.metadata!.uptime! * 1000
    : (Math.round(new Date().getTime() / 1000) -
        thing.metadata!.updated_time!) *
      1000;
  return (
    <Flex gap={10}>
      <Title level={4} style={{ margin: 0 }}>
        {thing.name || intl.formatMessage({ id: 'common.undefined' })}
      </Title>
      <Flex gap={5} align="center" justify="center">
        {getBadgeConnection(thing.metadata!.connected || false)}
        <Text type={thing.metadata?.connected ? undefined : 'secondary'}>
          {connectionDuration > 0
            ? moment.duration(connectionDuration).humanize()
            : ''}
        </Text>
      </Flex>
    </Flex>
  );
};

export default ThingTitle;
