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

interface IModalExchange {
    isOpen: boolean;
    isClosing: boolean;
    amount: number;
    balance: number | undefined;
    nickname: string;
    rangeRef: RefObject<HTMLInputElement>;
    setNickname: Dispatch<SetStateAction<string>>;
    setAmount: Dispatch<SetStateAction<number>>;
    onClose: () => void;
    handleCreateExchange: (amount: number, total: number, nickname: string) => Promise<void>;
}

const ModalExchange: FC<IModalExchange> = ({
    isOpen,
    isClosing,
    amount,
    balance,
    nickname,
    rangeRef,
    onClose,
    setNickname,
    setAmount,
    handleCreateExchange,
}) => {
    const { priceItem, image, isDecimal } = useModalStore();
    return (
        <div
            className={`${styles.modal} ${isOpen ? styles.isOpen : ''} ${isClosing ? styles.isClosing : ''}`}
        >
            <div
                className={`${styles.modalContent} ${isOpen ? styles.isOpen : ''} ${isClosing ? styles.isClosing : ''}`}
            >
                <div className={styles.closeButton} onClick={onClose} />
                <div className={styles.modalTitle}>
                    <span>Обмен</span>
                </div>
                <ModalExchangeContent
                    isDecimal={isDecimal}
                    balance={balance}
                    nickname={nickname}
                    amount={amount}
                    image={image}
                    priceItem={priceItem}
                    rangeRef={rangeRef}
                    setNickname={setNickname}
                    setAmount={setAmount}
                />
                <button
                    className={styles.submitButton}
                    onClick={() => handleCreateExchange(amount, amount / +priceItem, nickname)}
                >
                    Вывод
                </button>
            </div>
        </div>
    );
};

export default ModalExchange;