import { gql, useQuery } from '@apollo/client';
import type * as CRMTypes from 'graphql/crm.types';
import { observer } from 'mobx-react-lite';
import { useStore } from 'stores/hooks';

const QUERY_GET_CURRENCY_SYMBOL = gql`
  query GetCurrencySymbol($currencyid: Uuid!) {
    transactioncurrency(transactioncurrencyid: $currencyid) {
      currencysymbol
    }
  }
`;

const CurrencyAddon = observer(() => {
  const { $calculation } = useStore();

  const currencyid = $calculation.$values.getValue('supplierCurrency');

  const { data } = useQuery<
    CRMTypes.GetCurrencySymbolQuery,
    CRMTypes.GetCurrencySymbolQueryVariables
  >(QUERY_GET_CURRENCY_SYMBOL, {
    variables: {
      currencyid,
    },
    skip: !currencyid,
  });

  return <span>{data?.transactioncurrency?.currencysymbol}</span>;
});

export default <CurrencyAddon />;