import * as THREE from 'three';
import { useEffect } from 'react';
import { useProductStore } from '../../../store/simulation/useProductStore';
import { useSelectedProduct } from '../../../store/simulation/useSimulationStore';
import AddOrRemoveEventsInProducts from './events/addOrRemoveEventsInProducts';
import { upsertProductOrEventApi } from '../../../services/simulation/UpsertProductOrEventApi';
import { getAllProductsApi } from '../../../services/simulation/getallProductsApi';

function Products() {
    const { products, addProduct } = useProductStore();
    const { setSelectedProduct } = useSelectedProduct();

    useEffect(() => {
        if (products.length === 0) {
            const id = THREE.MathUtils.generateUUID();
            const name = 'Product 1';
            addProduct(name, id);
            // upsertProductOrEventApi({ productName: name, productId: id }).then((data) => {
            //     console.log('data: ', data);
            // });
            setSelectedProduct(id, name);
        }
    }, [products])

    useEffect(() => {
        // const email = localStorage.getItem('email')
        // const organization = (email!.split("@")[1]).split(".")[0];
        // console.log(organization);
        // getAllProductsApi(organization).then((data) => {
        //     console.log('data: ', data);
        // })
    }, [])

    return (
        <>

            <AddOrRemoveEventsInProducts />

        </>
    )
}

export default Products