import { useQuery } from 'react-query';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { goalsKeys } from 'src/pages/dashboard/goals/queries';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { getGoalFormulaChain } from '../../services';
import { type GoalFormulaChain } from '../../types';

type FormulaDisplayProps = {
  formulaChainId: number;
};

const FormulaDisplay = ({ formulaChainId }: FormulaDisplayProps) => {
  const { t } = useLokaliseTranslation('goals');

  const { data: formulaChain, isLoading } = useQuery(
    goalsKeys.allRangeFields(formulaChainId),
    () => getGoalFormulaChain(formulaChainId),
    {
      select: r => r.data as GoalFormulaChain,
      enabled: !!formulaChainId,
    },
  );

  if (!formulaChain || isLoading) {
    return null;
  }

  return (
    <Stack sx={{ py: 2, gap: 0.5 }}>
      <Typography
        variant="globalXXS"
        color="new.text.neutral.lighter"
      >
        {t('general:formula')}
      </Typography>
      <Typography
        variant="globalS"
        fontWeight="fontWeightSemiBold"
        color="new.text.neutral.default"
      >
        {formulaChain.title}
      </Typography>
    </Stack>
  );
};

export default FormulaDisplay;
