import React from 'react';
import { Box, Text } from '@nova-hf/ui';
import { formatPrice } from 'beta/utils/helpers';
import { inject, observer } from 'mobx-react';
import Authentication from 'store/authentication';
import { useGetSplitBillQuery } from 'typings/graphql';

type SubExtraInfoProps = {
  subId: string;
  info: string;
  authentication: Authentication;
};

const SubExtraInfo = ({ subId, info }: SubExtraInfoProps) => {
  const { data } = useGetSplitBillQuery({
    variables: {
      input: {
        subscriptionId: subId,
      },
    },
    skip: !subId || subId?.length !== 7 || info !== 'thak',
  });

  if (info === 'thak' && data?.getSplitBill?.primaryPayerLimit) {
    return (
      <Box display="flex" alignItems="center" flexDirection="row" gap={1}>
        <Text>{formatPrice(data.getSplitBill.primaryPayerLimit)}</Text>
      </Box>
    );
  }
  return null;
};

export default inject('authentication')(observer(SubExtraInfo));