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

const EditorSidebar = () => {
    const { openSidebar, setOpenSidebar } = useSharedStore();
    const { tool, setTool, selectedObjectId, objects, updateObject, deleteObject, loadPages } = useEditorStore();

    const selectedObject = objects.find((obj) => obj.id === selectedObjectId);

    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 px-8 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-8 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-9" />
                    <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}
                                onUpdate={updateObject}
                                onDelete={deleteObject}
                            />
                        ) : (
                            <ToolInstructions tool={tool} />
                        )}
                    </div>
                </div>
            </aside>
        </>
    );
};

export default EditorSidebar;