import { applyDotBackgroundStyle, normalCanvasBackgroundStyle } from "@/page/App/components/dotPanel/components/Canvas/style";
import {  UNIT_HEIGHT } from "@/page/App/components/dotPanel/constant/canvas";
import { css } from "@emotion/react"
import { Theme } from "@mui/material"

export const emptyStateStyle = (theme: Theme) => css`
  font-size: 14px;
  color: ${theme.palette.text.secondary};
  text-align: center;
`
export const applyEmptyStateWrapperStyle = (
  _isInner: boolean = false,
  _paddingTopBottom: number,
  isEditMode: boolean,
  rowCount: number,
  theme: Theme,
  canShowDot
) => {
  return css`
  height: 100%;
  width: 100%;
  // background: ${theme.palette.background.default};
  display: flex;
  align-items: center;
  padding: ${isEditMode ? "20px" : "none"}
  justify-content: center;
  min-height:${rowCount * 13 * UNIT_HEIGHT}px;
  z-index:${_isInner ? 1 : _paddingTopBottom};
     ${canShowDot
      ? applyDotBackgroundStyle(8)
      : normalCanvasBackgroundStyle}
`
}
export const applyContainerWrapperStyle = css`
  width: 100%;
  height: 100%;
  display: flex;
`
