import React, { useEffect, useRef } from "react";
import {
    AddIcon,
    ArrowIcon,
    RemoveIcon,
    ResizeHeightIcon,
} from "../../../icons/ExportCommonIcons";
import RenameInput from "../../../ui/inputs/RenameInput";
import { handleResize } from "../../../../functions/handleResizePannel";
import { useSelectedAsset, useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../store/simulation/useProductStore";
import { generateUUID } from "three/src/math/MathUtils";
import RenderOverlay from "../../../templates/Overlay";
import EditWidgetOption from "../../../ui/menu/EditWidgetOption";

interface Event {
    pathName: string;
}

interface ListProps {
    val: Event;
}

const List: React.FC<ListProps> = ({ val }) => {
    return (
        <div className="process-container">
            <div className="value">
                {val.pathName}
            </div>
        </div>
    );
};

const Simulations: React.FC = () => {
    const productsContainerRef = useRef<HTMLDivElement>(null);
    const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent } = useProductStore();
    const { selectedProduct, setSelectedProduct } = useSelectedProduct();
    const { selectedAsset, clearSelectedAsset } = useSelectedAsset();

    const handleAddProduct = () => {
        addProduct(`Product ${products.length + 1}`, generateUUID());
    };

    const handleRemoveProduct = (productId: string) => {
        const currentIndex = products.findIndex(p => p.productId === productId);
        const isSelected = selectedProduct.productId === productId;

        const updatedProducts = products.filter(p => p.productId !== productId);

        if (isSelected) {
            if (updatedProducts.length > 0) {
                let newSelectedIndex = currentIndex;
                if (currentIndex >= updatedProducts.length) {
                    newSelectedIndex = updatedProducts.length - 1;
                }
                setSelectedProduct(
                    updatedProducts[newSelectedIndex].productId,
                    updatedProducts[newSelectedIndex].productName
                );
            } else {
                setSelectedProduct('', '');
            }
        }

        removeProduct(productId);
    };

    const handleRenameProduct = (productId: string, newName: string) => {
        renameProduct(productId, newName);
        if (selectedProduct.productId === productId) {
            setSelectedProduct(productId, newName);
        }
    };

    const handleAddEventToProduct = () => {
        if (selectedAsset) {
            addEvent(selectedProduct.productId, selectedAsset);
            clearSelectedAsset();
        }
    };

    const handleRemoveEventFromProduct = () => {
        if (selectedAsset) {
            removeEvent(selectedProduct.productId, selectedAsset.modelUuid);
            clearSelectedAsset();
        }
    };

    const selectedProductData = products.find(
        (product) => product.productId === selectedProduct.productId
    );

    const events: Event[] = selectedProductData?.eventDatas.map((event) => ({
        pathName: event.modelName,
    })) || [];

    return (
        <div className="simulations-container">
            <div className="header">Simulations</div>
            <div className="add-product-container">
                <div className="actions">
                    <div className="header">
                        <div className="header-value">Products</div>
                        <div className="add-button" onClick={handleAddProduct}>
                            <AddIcon /> Add
                        </div>
                    </div>
                    <div
                        className="lists-main-container"
                        ref={productsContainerRef}
                        style={{ height: "120px" }}
                    >
                        <div className="list-container">
                            {products.map((product, index) => (
                                <div
                                    key={product.productId}
                                    className={`list-item ${selectedProduct.productId === product.productId ? "active" : ""}`}
                                >
                                    <div
                                        className="value"
                                        onClick={() => setSelectedProduct(product.productId, product.productName)}
                                    >
                                        <input
                                            type="radio"
                                            name="products"
                                            checked={selectedProduct.productId === product.productId}
                                            readOnly
                                        />
                                        <RenameInput
                                            value={product.productName}
                                            onRename={(newName) => handleRenameProduct(product.productId, newName)}
                                        />
                                    </div>
                                    {products.length > 1 && (
                                        <div
                                            className="remove-button"
                                            onClick={() => handleRemoveProduct(product.productId)}
                                        >
                                            <RemoveIcon />
                                        </div>
                                    )}
                                </div>
                            ))}
                        </div>
                        <div
                            className="resize-icon"
                            id="action-resize"
                            onMouseDown={(e) => handleResize(e, productsContainerRef)}
                        >
                            <ResizeHeightIcon />
                        </div>
                    </div>
                </div>

                <div className="simulation-process">
                    <div className="collapse-header-container">
                        <div className="header">Events</div>
                        <div className="arrow-container">
                            <ArrowIcon />
                        </div>
                    </div>
                    {events.map((event, index) => (
                        <List key={index} val={event} />
                    ))}
                </div>

                <div className="compare-simulations-container">
                    <div className="compare-simulations-header">
                        Need to Compare Layout?
                    </div>
                    <div className="content">
                        Click <span>'Compare'</span> to review and analyze the layout differences between them.
                    </div>
                    <div className="input">
                        <input type="button" value={"Compare"} className="submit" />
                    </div>
                </div>
            </div>

            {selectedAsset &&
                <RenderOverlay>
                    <EditWidgetOption
                        options={['Add to Product', 'Remove from Product']}
                        onClick={(option) => {
                            if (option === 'Add to Product') {
                                handleAddEventToProduct();
                            } else {
                                handleRemoveEventFromProduct();
                            }
                        }}
                    />
                </RenderOverlay>
            }
        </div>
    );
};

export default Simulations;