import { css } from "@emotion/react"
import {
  BORDER_WIDTH,
  SCROLL_CONTAINER_PADDING,
  UNIT_HEIGHT,
} from "@/page/App/components/dotPanel/constant/canvas"
import { getPaddingShape } from "../../utils/styleutils/padding"
import { globalColor } from "@/utils/colorBuilder"
import { Theme } from "@mui/material"
import styled from "@emotion/native"
import { View, ViewProps } from "react-native"
import { CanvasProps, ContainerProps,DropZoneProps } from "./interface"

export const outerComponentCanvasContainerStyle = (
  _padding: string,
  _background: string,
  _shadowSize: "none" | "small" | "medium" | "large",
  dividerColor?: string,
) => {
  // const { paddingTop, paddingBottom, paddingLeft, paddingRight } = getPaddingShape(padding)
  return css`
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
 
    margin:none;
   
    border: ${dividerColor ? `1px solid ${dividerColor}` : "unset"};
  `
}
//  padding: ${paddingTop}px ${paddingRight}px ${paddingBottom}px  ${paddingLeft}px;
export const outerModalCanvasContainerStyle = (padding: string) => {
  const { paddingTop, paddingBottom, paddingLeft, paddingRight } =
    getPaddingShape(padding)
  return css`
    height: 100%;
    width: 100%;
    padding: ${paddingTop}px ${paddingRight}px ${paddingBottom}px
      ${paddingLeft}px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  `
}

export const outerComponentCanvasContainerWithJsonStyle = (
  padding: number,
) => css`
  height: 100%;
  width: 100%;
  padding: 
  position: relative;
  overflow: auto;
 ` //${padding}px;

export const componentCanvasContainerStyle = css`
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden auto;
`
export const containerShapeStyle = (padding: string) => {
  const { paddingTop, paddingBottom, paddingLeft, paddingRight } =
    getPaddingShape(padding)
  return css`

    position: absolute;
    border: ${BORDER_WIDTH}px solid ${globalColor("grayBlue-09")};
    pointer-events: none;
  `
}
// top: ${paddingTop}px;
// bottom: ${paddingBottom}px;
// left: ${paddingLeft}px;
// right: ${paddingRight}px;
export const dropZoneStyle = () => css`
  width: 100%;
  height:  100%;

`
// ${canvasHeight}px
export const applyComponentCanvasStyle = (
  unitWidth: number,
  showDot: boolean = false,
  isEditMode: boolean,
  theme: Theme
) => {
  return css`
    width: 100%;
    height: 100%;
   background:${theme.palette.background.default};
    position: relative;
      padding-bottom:${isEditMode ? "8px" : "none"}; 
       ${showDot
      ? applyDotBackgroundStyle(unitWidth)
      : normalCanvasBackgroundStyle}
  `
}

export const normalCanvasBackgroundStyle = css`
  background: unset;
`

export const applyDotBackgroundStyle = (unitWidth: number) => {
  return css`
    background-image: radial-gradient(
      circle at 0.2px 0.2px,
      ${globalColor("grayBlue-04")} 1px,
      transparent 0px
    );
    background-repeat: repeat;
    background-size: ${unitWidth}px ${UNIT_HEIGHT}px;
  `
}

export const selectoSelectionStyle = css`
  > .selecto-selection {
    position: absolute !important;
    transform: translate(
      var(--ImpaktApps-select-area-left, 0),
      var(--ImpaktApps-select-area-top, 0)
    ) !important;
    width: var(--ImpaktApps-select-area-width, 0) !important;
    height: var(--ImpaktApps-select-area-height, 0) !important;
    border: 1px solid ${globalColor("techPurple-03")} !important;
  }
`

export const maskStyle = css`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: ${globalColor("blackAlpha-04")};
  z-index: -1;
`

export const OuterComponentCanvasContainer = styled(View)<ContainerProps>(
  ({ containerPadding, background, shadowSize,dividerColor }) => ({
    height: "100%",
    width: "100%",
    position: "relative",
    overflow: "hidden",
    margin: 0, // RN doesn't support `margin: "none"`; `0` is correct
    borderWidth: dividerColor ? 1 : 0,
    borderColor: dividerColor || "transparent",
  })
)

export const ComponentCanvasContainer = styled(View)<ViewProps>({
  width: "100%",
  height: "100%",
  position: "relative",
  overflow: "scroll", // Closest alternative to `overflow: hidden auto` in RN
})

export const DropZone = styled(View)<DropZoneProps>(({ canvasHeight }) => ({
  width: "100%",
  height: canvasHeight ? "100%" : canvasHeight,
}))

export const ApplyComponentCanvas = styled(View)<CanvasProps>(({ unitWidth, showDot }) => ({
  width: "100%",
  height: "100%",
  position: "relative",
  // ...(showDot ? applyDotBackgroundStyle(unitWidth) : normalCanvasBackgroundStyle),
}))
