import { FC, useRef } from "react";
import { DragBar } from "@/page/App/components/Actions/DragBar";
import { applyActionEditorStyle, contentContainerStyle } from "./styles";
import { Divider } from "@mui/material";
import { useSelector } from "react-redux";
import { SearchList } from "../../components/Style/SearchList";
import { getSelectedClass } from "@/redux/config/configSelector";
import StylePanel from "../../components/Style/StylePanel";
import { EmptySelected } from "../../components/InspectPanel/components/EmptySelected";
const StyleEditorDefaultHeight = 520;
export const StyleEditor: FC = () => {
  const panelRef = useRef<HTMLDivElement | null>(null);
  const selectedClass = useSelector(getSelectedClass);
  return (
    <div
      css={applyActionEditorStyle(StyleEditorDefaultHeight)}
      ref={panelRef}
      data-onboarding-action="actionEditor"
    >
      <DragBar resizeRef={panelRef} minHeight={StyleEditorDefaultHeight} />
      <Divider />
      <div css={contentContainerStyle}>
        <SearchList />
        {selectedClass !== null && selectedClass.length > 0 ? (
          <StylePanel />
        ) : (
          <EmptySelected tip1={"No class selected"} tip2={" Click on a class to select it."}/>
        )}
      </div>
    </div>
  );
};
StyleEditor.displayName = "StyleEditor";
