'use client';

import styles from '@/components/shop/Shop.module.css';
import { FC, useEffect, useRef, useState } from 'react';
import ModalExchangeContainer from '@/components/ui/modal-exchange/ModalExchangeContainer';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import ShopItem from '@/components/shop/ShopItem';
import { IHandleOpen } from '@/components/shop/ShopContainer';
import { useShopItemsStore } from '@/store/shopItems.state';
import { usePlayerStore } from '@/store/player.state';
import { toFixed } from '@/utils/FormatNumber';

interface IShop {
    isOpen: boolean;
    handleClose: () => void;
    handleOpen: (data: IHandleOpen) => void;
}

const Shop: FC<IShop> = ({ isOpen, handleOpen, handleClose }) => {
    const shopBlockRef = useRef<HTMLDivElement>(null);
    const [isOverflow, setIsOverflow] = useState(false);

    const { shopItems } = useShopItemsStore();
    const { player } = usePlayerStore();

    useEffect(() => {
        const checkOverflow = () => {
            if (shopBlockRef.current) {
                setIsOverflow(
                    shopBlockRef.current.scrollHeight > shopBlockRef.current.clientHeight,
                );
            }
        };

        checkOverflow();

        window.addEventListener('resize', checkOverflow);

        return () => window.removeEventListener('resize', checkOverflow);
    }, []);

    return (
        <div className={`${styles.shop} ${isOverflow ? styles.overflow : ''}`} ref={shopBlockRef}>
            <div className={styles.content}>
                <div className={styles.header}>
                    <span>Магазин</span>
                </div>
                <div className={styles.items}>
                    <div className={styles.itemsHeader}>
                        <span>Товары</span>
                        <span className={styles.itemsAll}>Все</span>
                    </div>
                    <div className={styles.shopItems}>
                        {shopItems &&
                            shopItems.map(shopItem => (
                                <ShopItem
                                    key={shopItem.id}
                                    shopItem={shopItem}
                                    handleOpen={handleOpen}
                                />
                            ))}
                    </div>
                </div>
                <div className={styles.upgrades}>
                    <div className={styles.upgradesTitle}>
                        <span>Улучшения</span>
                    </div>
                    <div className={styles.upgradesContent}>
                        <span>Уже скоро...</span>
                    </div>
                </div>
                <ModalExchangeContainer
                    isOpen={isOpen}
                    balance={toFixed(player?.attributes.balance)}
                    onClose={handleClose}
                />
                <ToastContainer />
            </div>
        </div>
    );
};

export default Shop;