Dwinzo_dev/app/src/components/layout/sidebarLeft/visualization/Templates.tsx

import { useEffect } from "react";
import { useDroppedObjectsStore } from "../../../../store/useDroppedObjectsStore";
import useTemplateStore from "../../../../store/useTemplateStore";
import { useSelectedZoneStore } from "../../../../store/useZoneStore";
import { getTemplateData } from "../../../../services/realTimeVisulization/zoneData/getTemplate";
import { useSocketStore } from "../../../../store/store";

const Templates = () => {
  const { templates, removeTemplate, setTemplates } = useTemplateStore();
  const { setSelectedZone, selectedZone } = useSelectedZoneStore();
  const { visualizationSocket } = useSocketStore();

  useEffect(() => {
    async function templateData() {
      try {
        const email = localStorage.getItem("email") || "";
        const organization = email?.split("@")[1]?.split(".")[0];
        let response = await getTemplateData(organization);
        setTemplates(response);
      } catch (error) {
        console.error("Error fetching template data:", error);
      }
    }

    templateData();
  }, []);

  const handleDeleteTemplate = async (id: string) => {
    try {
      const email = localStorage.getItem("email") || "";
      const organization = email?.split("@")[1]?.split(".")[0];
      let deleteTemplate = {
        organization: organization,
        templateID: id,
      };
      if (visualizationSocket) {
        visualizationSocket.emit("v2:viz-template:deleteTemplate", deleteTemplate);
      }
      removeTemplate(id);
    } catch (error) {
      console.error("Error deleting template:", error);
    }
  };

  const handleLoadTemplate = async (template: any) => {
    try {
      if (selectedZone.zoneName === "") return;

      const email = localStorage.getItem("email") || "";
      const organization = email?.split("@")[1]?.split(".")[0];

      let loadingTemplate = {
        organization: organization,
        zoneId: selectedZone.zoneId,
        templateID: template.id,
      };

      if (visualizationSocket) {
        visualizationSocket.emit("v2:viz-template:addToZone", loadingTemplate);
      }

      setSelectedZone({
        panelOrder: template.panelOrder,
        activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
        widgets: template.widgets,
      });

      useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId);

      if (Array.isArray(template.floatingWidget)) {
        template.floatingWidget.forEach((val: any) => {
          useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, val);
        });
      }
    } catch (error) {
      console.error("Error loading template:", error);
    }
  };

  return (
    <div className="template-list">
      {templates.map((template) => (
        <div key={template.id} className="template-item">
          {template?.snapshot && (
            <div className="template-image-container">
              <img
                src={template.snapshot}
                alt={`${template.name} preview`}
                className="template-image"
                onClick={() => handleLoadTemplate(template)}
              />
            </div>
          )}
          <div className="template-details">
            <div
              onClick={() => handleLoadTemplate(template)}
              className="template-name"
            >
              {template.name}
            </div>
            <button
              onClick={() => handleDeleteTemplate(template.id)}
              className="delete-button"
              aria-label="Delete template"
            >
              Delete
            </button>
          </div>
        </div>
      ))}
      {templates.length === 0 && (
        <div className="no-templates">
          No saved templates yet. Create one in the visualization view!
        </div>
      )}
    </div>
  );
};

export default Templates;