'use client';

import Shop from '@/components/shop/Shop';
import { useCallback, useState } from 'react';
import { useModalStore } from '@/store/modal.state';

export interface IHandleOpen {
    image?: string;
    isDecimal?: boolean;
    priceItem?: number;
    shopItem?: number;
}

const ShopContainer = () => {
    const [isOpen, setIsOpen] = useState<boolean>(false);

    const { setShopItemId, setPriceItem, setImage, setIsDecimal } = useModalStore();

    const handleClose = useCallback(() => {
        setIsOpen(false);
    }, []);

    const handleOpen = useCallback((data: IHandleOpen) => {
        if (data.image && data.priceItem && data.shopItem && data.isDecimal !== undefined) {
            setIsDecimal(data.isDecimal);
            setImage(data.image);
            setPriceItem(data.priceItem);
            setShopItemId(data.shopItem);
            setIsOpen(true);
        } else {
            setIsOpen(true);
            setIsDecimal(true);
            setImage('/icons/small-coin-icon.svg');
            setPriceItem(0);
            setShopItemId(null);
        }
    }, []);

    return <Shop isOpen={isOpen} handleClose={handleClose} handleOpen={handleOpen} />;
};

export default ShopContainer;