import Logo from "@/assets/images/logo.svg";
import { getPaperDimensions } from "@/config/paperSizes";
import { clx } from "@/helpers/utils";
import { useSharedStore } from "@/shared/store/sharedStore";
import { CloseSquare } from "iconsax-react";
import { useEditorStore, type ToolType } from "../store/editorStore";
import { useObjectHandlers } from "./canvas/useObjectHandlers";
import { ObjectSettings, ToolInstructions, ToolsBar } from "./sidebar";

type EditorSidebarProps = {
  catalogSize?: string;
};

const EditorSidebar = ({ catalogSize }: EditorSidebarProps) => {
  const { openSidebar, setOpenSidebar } = useSharedStore();
  const { tool, setTool, selectedObjectId, objects, deleteObject } =
    useEditorStore();
  const { handleObjectUpdate } = useObjectHandlers();

  const selectedObject = objects.find((obj) => obj.id === selectedObjectId);
  const { width: pageWidth, height: pageHeight } = getPaperDimensions(
    catalogSize ?? "a4",
  );

  const handleToolClick = (selectedTool: ToolType) => {
    setTool(selectedTool);
  };

  // const handleLoadJSON = async () => {
  //     try {
  //         const response = await fetch('/viewer-data.json');
  //         const data = await response.json();
  //         if (data.pages && Array.isArray(data.pages)) {
  //             loadPages(data.pages);
  //         }
  //     } catch (error) {
  //         console.error('خطا در لود JSON:', error);
  //         alert('خطا در لود فایل JSON');
  //     }
  // };

  return (
    <>
      {openSidebar ? (
        <div
          className="fixed inset-0 z-10 bg-black/50"
          onClick={() => setOpenSidebar(false)}
        />
      ) : null}
      <aside
        className={clx(
          "fixed right-0 top-0 bottom-0 flex translate-x-[420px] w-[350px] flex-col bg-white py-10 opacity-0 transition-all ease-in-out xl:visible xl:right-4 xl:top-4 xl:bottom-4 xl:translate-x-0 xl:rounded-[32px] xl:bg-white xl:px-2 pl-8 xl:pl-8 px-2 xl:py-10 xl:opacity-100",
          openSidebar && "z-40 translate-x-0 opacity-100",
        )}
      >
        <div className="mb-10 flex items-center justify-between">
          <img src={Logo} alt="لوگو دانک" className="h-5 mx-auto pr-3" />
          <div className="flex items-center gap-2">
            {/* <button
                            onClick={handleLoadJSON}
                            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                            title="لود JSON"
                        >
                            <DocumentUpload color="black" size={24} />
                        </button> */}
            <button
              onClick={() => setOpenSidebar(false)}
              className="xl:hidden p-2 hover:bg-gray-100 rounded-lg transition-colors"
            >
              <CloseSquare color="black" size={24} />
            </button>
          </div>
        </div>

        <div className="flex gap-8 flex-1 min-h-0">
          <ToolsBar tool={tool} onToolClick={handleToolClick} />

          <div className="flex-1 overflow-y-auto">
            {selectedObject ? (
              <ObjectSettings
                selectedObject={selectedObject}
                pageWidth={pageWidth}
                pageHeight={pageHeight}
                onUpdate={handleObjectUpdate}
                onDelete={deleteObject}
              />
            ) : (
              <ToolInstructions tool={tool} />
            )}
          </div>
        </div>
      </aside>
    </>
  );
};

export default EditorSidebar;
