import { FC, useEffect } from "react"
import {
  applyEmptyStateWrapperStyle,
  emptyStateStyle,
} from "@/widgetLibrary/ContainerWidget/style"
// import { getPaddingShape } from "@/page/app/components/DotPanel/components/Canvas/renderComponentCanvasContainer"
import { UNIT_HEIGHT } from "@/page/app/components/DotPanel/constant/canvas"
import { getPaddingShape } from "@/page/app/components/DotPanel/utils/styleutils/padding"

export const ContainerEmptyState: FC<{
  isInner?: boolean
  containerPadding?: string
  handleUpdateHeight?: (height: number) => void
}> = ({ handleUpdateHeight, isInner, containerPadding = "0" }) => {
  // const { t } = useTranslation()

  const paddings = getPaddingShape(containerPadding)

  const paddingTopBottom = paddings.paddingTop + paddings.paddingBottom

  useEffect(() => {
    if (handleUpdateHeight) {
      handleUpdateHeight(13 * UNIT_HEIGHT + paddingTopBottom)
    }
  }, [handleUpdateHeight, paddingTopBottom])

  return (
    <div css={applyEmptyStateWrapperStyle(isInner, paddingTopBottom)}>
      <span css={emptyStateStyle}>Drag components here</span>
    </div>
  )
}

export const GridConfigTemp = [
  {xs:12,sm:12,md:2,lg:2},
  {xs:12,sm:12,md:2,lg:2},
  {xs:12,sm:12,md:2,lg:2},
  {xs:12,sm:12,md:6,lg:6},

]