import { css } from "@emotion/react"
import styled from "@emotion/native"
import {ContainerProps} from './interface'
import {  View } from "react-native"
import { Theme } from "@mui/material"

export const applyScaleContainerStyle = (
  isEditorPreview: boolean,
  isEditorMode: boolean,
  theme:Theme
) => {
  return css`
    box-sizing: border-box;
    min-width: 148px;
    height: 100%;
    min-height: 280px;
    background:${theme.palette.action.focus};
    overflow: auto;
    flex: 1;
    position: relative;
    ${isEditorMode &&
    `* {
      user-select: none;
    }`}
  `
}


export const Container = styled(View)<ContainerProps>(({  
  isEditorPreview,
  isEditorMode,
}) => ({
  // minWidth: 148,
  height: "100%",
  // minHeight: 280,
  // backgroundColor: "red",
  // overflow: "scroll", // Closest alternative to `overflow: auto` in RN
  // flex: 1,
  // position: "relative",
  // ...(isEditorMode && {
  //   pointerEvents: "none", // Closest alternative to `user-select: none`
  // }),
}))
