'use client';
import { Dispatch, FC, SetStateAction } from 'react';
import styles from '@/components/ui/modal-exchange/ModalExchange.module.css';

interface IRangeInput {
    isDecimal: boolean;
    balance: number | undefined;
    amount: number;
    priceItem: number;
    rangeRef: React.RefObject<HTMLInputElement>;
    setAmount: Dispatch<SetStateAction<number>>;
}

const RangeInput: FC<IRangeInput> = ({
    isDecimal,
    balance,
    priceItem,
    amount,
    rangeRef,
    setAmount,
}) => {
    const handleRangeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        let value = parseFloat(e.target.value);
        if (!isDecimal) {
            value = Math.round(value / priceItem) * priceItem;
        } else {
            value = parseFloat(value.toFixed(6));
        }
        setAmount(value);
    };

    return (
        <div className={styles.inputRange}>
            <input
                type='range'
                id='amountRange'
                min='0'
                max={balance}
                step={isDecimal ? '0.000001' : priceItem.toString()}
                value={amount}
                onChange={handleRangeChange}
                ref={rangeRef}
            />
        </div>
    );
};

export default RangeInput;