import { css } from "@emotion/react"
import { ImpaktMode, ScreenPayload } from "@/redux/config/configState"
import { globalColor } from "@/utils/colorBuilder"
import { Theme } from "@mui/material"

export const applyComponentCanvasStyle = (
  width: number,
  height: number,
  unitWidth: number,
  unitHeight: number = 8,
  showDot: boolean = false,
  addHeight: number = 0,
  minHeight?: number,
) => {
  const heightCss = minHeight
    ? css`
        height: ${addHeight}px;
        min-height: ${minHeight}px;
      `
    : css`
        min-height: 100vh;
        height: ${addHeight}px;
      `
  return css`
    width: 100%;
    ${heightCss};
    ${showDot
      ? applyDotBackgroundStyle(width, height, unitWidth, unitHeight)
      : normalCanvasBackgroundStyle}
    position: relative;
  `
}

const normalCanvasBackgroundStyle = css`
  background: unset;
`

const applyDotBackgroundStyle = (
  width: number,
  height: number,
  unitWidth: number,
  unitHeight: number = 8,
) => {
  return css`
    background-image: radial-gradient(
        circle at 1px 1px,
        grayBlue 1px,
        transparent 0px
      ),
      radial-gradient(
        circle at ${width - 1}px 1px,
        grayBlue 1px,
        transparent 0px
      );
    background-repeat: repeat;
    background-size:
      ${unitWidth}px ${unitHeight}px,
      100% ${unitHeight}px;
  `
}
// border: 1px dashed ${getColor("techPurple", "03")}
export const applyDotLintRectangleStyle = (
  w: number,
  h: number,
  x: number = 0,
  y: number = 0,
) => {
  return css`
    width: ${w}px;
    height: ${h}px;
    position: absolute;
    transform: translate(${x}px, ${y}px);
    z-index: 6;
    pointer-events: none;
  `
}

export const applyRectangleStyle = (
  w: number,
  h: number,
  x: number,
  y: number,
  canDrop: boolean = false,
) => {
  return css`
    width: ${w}px;
    height: ${h}px;
    background-color: ${canDrop
      ? "techPurple"
      : "red"};
    opacity: 0.16;
    position: absolute;
    transform: translate(${x}px, ${y}px);
    z-index: 6;
    pointer-events: none;
  `
}

export const borderLineStyle = css`
  width: 100%;
  height: 100%;
  border: 2px solid #f7f8fa;
  pointer-events: none;
`
// border: 1px dashed ${getColor("techPurple", "03")}
export const applyFreezePlaceholderShapeStyle = (
  top: number,
  left: number,
  height: number,
  width: number,
) => {
  return css`
    position: absolute;
    left: ${left}px;
    top: ${top}px;
    width: ${width}px;
    height: ${height}px;
  
    z-index: 6;
  `
}


export const applyViewportContainerWrapperStyle = (
  mode: ImpaktMode,
  theme: Theme,
  width?: string,
  height?: number,

) => {

  const borderStyle = css`
  
  border: ${width !== "100%" ? `10px  solid ${theme.palette.action.focus}` : `none`};
    border-radius:15px;
    border-bottom:${width === "100%" ? "none" : `20px solid ${theme.palette.action.focus}`};
    box-shadow:1px 1px 2px px ${theme.palette.secondary.main};
  `
  return css`
    width: ${mode === "production"
      ? "100%"

      : width != undefined
        ? `${width}`
        : "100%"}; 
    height: ${mode === "production"
      ? "100%"
      : height != undefined
        ? `${height}px`
        : "100%"};
        max-width:100%;
    overflow: hidden;
  
    margin: 0 auto;
    position: relative;
      &::-webkit-scrollbar {
    width: 6px;
  }

  scrollbar-width: none;
 ${mode === "edit" && borderStyle}
  `
}
// ${globalColor("white-01")};

export const applyMultiSelectedScaleSquareStyle = (
  width: number,
  height: number,
  left: number,
  top: number,
) => {
  return css`
    position: absolute;
    border: 1px dashed ${globalColor("techPurple-03")};
    width: ${width}px;
    height: ${height}px;
    left: 0;
    top: 0;
    transform: translate(${left}px, ${top}px);
    pointer-events: none;
  `
}
