import { FC, useCallback, useRef } from "react";
import { DragBar } from "@/page/App/components/Actions/DragBar";
import { Divider } from "@mui/material";
import { useDispatch, useSelector } from "react-redux";
import { isOpenScreenPanel
    

} from "@/redux/config/configSelector";
import { applyActionEditorStyle, contentContainerStyle } from "../ThemeEditor/styles";
import { configActions } from "@/redux/config/configSlice";
import ScreenPanel from "../../components/ScreenPanel";
const StyleEditorDefaultHeight = 520;
export const ScreenEditor: FC = () => {
  const panelRef = useRef<HTMLDivElement | null>(null);
  const openScreenPanel = useSelector(isOpenScreenPanel);
  const dispatch = useDispatch();
  const handleCancelModal = useCallback(() => {
    dispatch(configActions.updateScreenPanel(false));
  }, [dispatch]);
  return (
    <div
      css={applyActionEditorStyle(StyleEditorDefaultHeight)}
      ref={panelRef}
      data-onboarding-action="actionEditor"
    >
      <DragBar resizeRef={panelRef} minHeight={StyleEditorDefaultHeight} />
      <Divider />
      <div css={contentContainerStyle}>
        <ScreenPanel 
           visible={openScreenPanel}
           handleCancelModal={handleCancelModal}
           isMaskClosable={true}
        />
      </div>
    </div>
  );
};
ScreenEditor.displayName = "ScreenEditor";
 