import { useContext } from "react";
import CanvasContext from "../Context/canvasContext/CanvasContext";
import TextPanel from "./TextPanel";
import ColorPanel from "./ColorPanel";
import ShapePanel from "./ShapePanel";
import IconPanel from "./IconPanel";
import UploadPanel from "./UploadPanel";
import StrokePanel from "./StrokePanel";
import ShadowPanel from "./ShadowPanel";
import FlipPanel from "./FlipPanel";
import PositionPanel from "./PositionPanel";
import ImagePanel from "./ImagePanel";
import GroupObjectPanel from "./GroupObjectPanel";
import CanvasPanel from "./CanvasPanel";

const EditorPanel = () => {
  const { selectedPanel } = useContext(CanvasContext);

  const renderPanel = () => {
    switch (selectedPanel) {
      case "text":
        return <TextPanel />;
      case "shape":
        return <ShapePanel />;
      case "icon":
        return <IconPanel />;
      case "upload":
        return <UploadPanel />;
      case "color":
        return <ColorPanel />;
      case "stroke":
        return <StrokePanel />;
      case "shadow":
        return <ShadowPanel />;
      case "flip":
        return <FlipPanel />;
      case "position":
        return <PositionPanel />;
      case "image-insert":
        return <ImagePanel />;
      case "group-obj":
        return <GroupObjectPanel />;
      case "canvas":
        return <CanvasPanel />;
      default:
        return;
    }
  };

  return (
    <>
      {selectedPanel !== "" && (
        <div className="w-80 lg:h-[calc(90vh-100px)] bg-background rounded-xl shadow-lg mx-4 my-auto">
          {renderPanel()}
        </div>
      )}
    </>
  );
};

export default EditorPanel;