dpage-editor/src/pages/editor/components/EditorSidebar.tsx

import Logo from "@/assets/images/logo.svg";
import { clx } from "@/helpers/utils";
import { useSharedStore } from "@/shared/store/sharedStore";
import { CloseSquare } 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 } = useEditorStore();

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

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


    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" />
                    <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 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;