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";
import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
import { handleAddEventToProduct } from "../../../../modules/simulation/events/points/functions/handleAddEventToProduct";

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 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({
                  selectedAsset,
                  addEvent,
                  selectedProduct,
                  clearSelectedAsset,
                });
              } else {
                handleRemoveEventFromProduct();
              }
            }}
          />
        </RenderOverlay>
      )}
    </div>
  );
};

export default Simulations;