import { FC } from "react";
import {
  applyEmptyStateWrapperStyle,
  emptyStateStyle,
} from "@/widgetLibrary/ContainerWidget/style";
// import { getPaddingShape } from "@/page/app/components/DotPanel/components/Canvas/renderComponentCanvasContainer"
import { getPaddingShape } from "@/page/App/components/dotPanel/utils/styleutils/padding";
import { useSelector } from "react-redux";
import { getIsIMPAKTEditMode, isShowDot } from "@/redux/config/configSelector";
import { useTheme } from "@mui/material";
export const ContainerEmptyState: FC<{
  isInner?: boolean;
  containerPadding?: string;
  handleUpdateHeight?: (height: number) => void;
  rowCount?: string;
}> = ({
  isInner,
  containerPadding = "0",
  rowCount = "1",
}) => {
  const canShowDot = useSelector(isShowDot);
  const paddings = getPaddingShape(containerPadding);
  const isEditMode = useSelector(getIsIMPAKTEditMode);
  const paddingTopBottom = paddings.paddingTop + paddings.paddingBottom;
const theme = useTheme()
  return (
    <div
      css={applyEmptyStateWrapperStyle(
        isInner,
        paddingTopBottom,
        isEditMode,
        Number(rowCount),
        theme,
        canShowDot

      )}
    >
      <span css={emptyStateStyle(theme)}>{isEditMode && !canShowDot && "Drag components here"}</span>
    </div>
  );
};
