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