import { useState } from 'react';

import AmountHelper from 'helpers/AmountHelper';

import ContractsFiltersRange from './ContractsFiltersRange';

/**
 * Отображает поле ввода размера долга.
 */
const ContractsFiltersDebtAmount = () => {
  const [currentFromValue, setFromValue] = useState();
  const [currentToValue, setToValue] = useState();

  const options = [
    { from: 1000, to: 5000 },
    { from: 5000, to: 15000 },
    { from: 15000, to: 25000 },
    { from: 25000, to: 100000 },
  ];

  const minValue = 0;
  const maxValue = 100000;

  /**
   * Отрисовывает вариант подстановки как элемент React, который отображается
   * в выпадающем меню. К примеру, для пары `1000` и `5000` функция вернёт
   * `1 000 - 5 000 ₽`.
   * @param option Элемент массива `options`.
   */
  function renderOption(option) {
    const fromText = AmountHelper.convertSystemToPretty(option.from);
    const toText = AmountHelper.convertSystemToPretty(option.to);

    return (
      <>
        {fromText} - {toText} <i>₽</i>
      </>
    );
  }

  /**
   * Возвращает `-1`, если первое значение меньше второго, `0` - если они равны,
   * и `1` - если больше.
   * @param valueA Первое значение.
   * @param valueB Второе значение.
   */
  function compareValues(valueA, valueB) {
    return valueA - valueB;
  }

  /**
   * Обновляет изменение текущего значения поля ввода.
   * @param fromValue Минимальное значение.
   * @param toValue Максимальное значение.
   */
  function handleChange(fromValue, toValue) {
    setFromValue(fromValue);
    setToValue(toValue);
  }

  return (
    <ContractsFiltersRange
      compareValues={compareValues}
      renderOption={renderOption}
      onChange={handleChange}
      fromValue={currentFromValue}
      toValue={currentToValue}
      minValue={minValue}
      maxValue={maxValue}
      options={options}
    />
  );
};

export default ContractsFiltersDebtAmount;