import { FilterRangeAmountProps } from '@/entities/common/model/types';
import { useEffect } from 'react';
import { useState } from 'react';
import { ChangeEvent } from 'react';
import { NumericFormat } from 'react-number-format';

export const FilterRangeAmount = ({
  title,
  minAmount,
  maxAmount,
  setMinAmount,
  setMaxAmount,
}: FilterRangeAmountProps) => {
  const [filterTitle, setFilterTitle] = useState<string>(title || '거래금액');

  const onChangeMinAmount = (val?: number) => {
    setMinAmount(val || undefined);
  };
  const onChangeMaxAmount = (val?: number) => {
    setMaxAmount(val || undefined);
  }

  useEffect(() => {
    setFilterTitle(title || '거래금액');
  }, [title])
  return (
    <>
      <div className="opt-field">
        <div 
          className="opt-label"
          style={{ fontSize: 'var(--fs-14)' }}
        >{ filterTitle }</div>
        <div className="opt-controls">
          <div className="input-wrapper ">
            <NumericFormat
              value={ minAmount }
              allowNegative={ false }
              displayType="input"
              onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeMinAmount(parseInt(e.target.value)) }
            ></NumericFormat>
          </div>
          <span> ~ </span>
          <div className="input-wrapper date">
            <NumericFormat
              value={ maxAmount }
              allowNegative={ false }
              displayType="input"
              onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeMaxAmount(parseInt(e.target.value)) }
            ></NumericFormat>
          </div>
        </div>
      </div>
    </>
  )
};