import { useStore } from '@/stores/hooks';
import { observer } from 'mobx-react-lite';
import styled from 'styled-components';
import { LoadingOutlined } from 'ui/elements/icons';

const TextAddon = styled.span`
  font-size: 14px;
`;

const formatter = Intl.NumberFormat('ru', {
  minimumFractionDigits: 2,
}).format;

export const IRRAddon = observer(() => {
  const { $calculation, $process } = useStore();

  if ($process.has('Tarif')) {
    return (
      <TextAddon>
        <LoadingOutlined rev="" />
        {' Подбирается тариф...'}
      </TextAddon>
    );
  }

  const tarif = $calculation.element('selectTarif').getValue();
  if (!tarif) return <TextAddon>Тариф не найден</TextAddon>;

  const { min, max } = $calculation.$values.getValue('irrInfo');
  return <TextAddon>{`${formatter(min)}% - ${formatter(max)}%`}</TextAddon>;
});