import React from "react";
import { useStore } from "../store/store.ts";

export const Sidebar: React.FC = () => {
  const availableModels = useStore((state) => state.availableModels);
  const addModel = useStore((state) => state.addModel);
  const sidebarOpen = useStore((state) => state.sidebarOpen);
  const closeSidebar = useStore((state) => state.closeSidebar);

  const handleAdd = (modelId: string) => {
    addModel(modelId, { x: 0, y: 0, z: 0 });
  };

  return (
    <section className={`sidebar ${sidebarOpen ? "sidebar--open" : ""}`}>
      <div className="sidebar-header">
        <h2 className="sidebar-title">Models</h2>
        <button
          className="sidebar-close"
          onClick={closeSidebar}
          aria-label="Close sidebar"
        >
          &times;
        </button>
      </div>
      <nav className="model-list">
        {availableModels.map((model) => (
          <article key={model.id} className="model-item">
            <span className="model-name">{model.name}</span>
            <button
              className="add-model-btn"
              onClick={() => handleAdd(model.id)}
            >
              Add
            </button>
          </article>
        ))}
      </nav>
    </section>
  );
};