import { FC, useRef } from "react";
import { ActionList } from "@/page/App/components/Actions/ActionList";
import { DragBar } from "@/page/App/components/Actions/DragBar";
import { FocusManager } from "@/utils/focusManager";
import { applyActionEditorStyle, contentContainerStyle } from "./styles";
import { Divider, useTheme } from "@mui/material";
import { getActionMixedList } from "@/redux/currentApp/action/actionSelector";
import { useSelector } from "react-redux";
import { ActionPanel } from "../../components/Actions/ActionPanel";
import ActionGuidePanel from "../../components/Actions/ActionGuidePanel";

const ActionEditorDefaultHeight = 320;

export const ActionEditor: FC = () => {
  const panelRef = useRef<HTMLDivElement | null>(null);
  const actionLists = useSelector(getActionMixedList);
 const theme = useTheme()
  return (
    <div
      css={applyActionEditorStyle(ActionEditorDefaultHeight,theme)}
      onClick={() => {
        FocusManager.switchFocus("action");
      }}
      ref={panelRef}
      data-onboarding-action="actionEditor"
    >
      <DragBar resizeRef={panelRef} minHeight={ActionEditorDefaultHeight} />
      <Divider />
      <div css={contentContainerStyle}>
        <ActionList />
        {actionLists.length > 0 ? <ActionPanel /> : 
      //  <ActionGuidePanel />
      <></> 
        }
      </div>
    </div>
  );
};

ActionEditor.displayName = "ActionEditor";
