'use client';

import { Dispatch, FC, RefObject, SetStateAction } from 'react';
import styles from '@/components/ui/modal-exchange/ModalExchange.module.css';
import Image from 'next/image';
import NicknameInput from '@/components/ui/modal-exchange/inputs/NicknameInput';
import RangeInput from '@/components/ui/modal-exchange/inputs/RangeInput';
import { toFixed } from '@/utils/FormatNumber';

interface IModalExchangeContent {
    isDecimal: boolean;
    balance: number | undefined;
    nickname: string;
    amount: number;
    priceItem: number;
    image: string;
    rangeRef: RefObject<HTMLInputElement>;
    setNickname: Dispatch<SetStateAction<string>>;
    setAmount: Dispatch<SetStateAction<number>>;
}

const ModalExchangeContent: FC<IModalExchangeContent> = ({
    isDecimal,
    balance,
    nickname,
    amount,
    priceItem,
    image,
    rangeRef,
    setNickname,
    setAmount,
}) => {
    return (
        <div className={styles.content}>
            <div className={styles.selectAmount}>
                <span className={styles.selectAmountTitle}>Выберите количество</span>
                <div className={styles.amount}>
                    <div className={styles.selectedAmount}>
                        <span>{`${amount.toFixed(isDecimal ? 3 : 0)} - ${toFixed(balance)}`}</span>
                        <Image
                            src={'/icons/small-robucks-icon.svg'}
                            alt={'small robucks icon'}
                            height={18}
                            width={18}
                        />
                    </div>
                    <RangeInput
                        isDecimal={isDecimal}
                        balance={balance}
                        amount={amount}
                        priceItem={priceItem}
                        rangeRef={rangeRef}
                        setAmount={setAmount}
                    />
                </div>
            </div>
            <div>
                <Image
                    src={'/icons/exchange-icon.svg'}
                    alt={'exchange icon'}
                    width={24}
                    height={24}
                />
            </div>
            <div className={styles.rate}>
                {priceItem && (
                    <span>{isDecimal ? (amount / priceItem).toFixed(3) : amount / priceItem}</span>
                )}
                <Image src={image} alt={'small coin icon'} height={24} width={24} />
            </div>
            <NicknameInput nickname={nickname} setNickname={setNickname} />
        </div>
    );
};

export default ModalExchangeContent;