import { VscArrowLeft, VscArrowRight } from "react-icons/vsc";
import useStore from "../../lib/FlowEditor/FlowEditorStore";
import { LedNodeComponent, SensorNodeComponent } from "./nodes/IO/IO";
import { DelayNodeComponent, MathNodeComponent , StartNodeComponent, FinishNodeComponent } from "./nodes/Logic/Logic";

const Panel = () => {
  const { panelClosed, togglePanelState } = useStore();

  const PanelButton = () => {
    return (
      <div
        className={`flow-panel-button ${panelClosed ? "rotate-180" : ""}`}
        onClick={togglePanelState}
      >
        <VscArrowLeft size={40} />
      </div>
    );
  };

  return (
    <aside
      className={`flow-panel ${panelClosed ? "w-0" : "w-60"} duration-300`}
    >
      <PanelButton />
      {!panelClosed && (
        <div className="flex flex-col">
          <SensorNodeComponent />
          <LedNodeComponent />

          <MathNodeComponent />
          <DelayNodeComponent />

          <StartNodeComponent />
          <FinishNodeComponent />
        </div>
      )}
    </aside>
  );
};

export default Panel;