const getComponentAttrStyle = (attr, index) => {
  const componentStyle = {
    zIndex: index + 1,
    left: `${attr.x}px`,
    top: `${attr.y}px`
  };
  return componentStyle;
};
const getSizeStyle = (attr, scale) => {
  return {
    width: `${scale ? scale * attr.w : attr.w}px`,
    height: `${scale ? scale * attr.h : attr.h}px`
  };
};
const getStatusStyle = (attr) => {
  return {
    display: attr.hide ? "none" : "block"
  };
};
const getPreviewConfigStyle = (previewConfig) => {
  const previewStyle = {};
  if (previewConfig) {
    if (previewConfig.overFlowHidden) {
      previewStyle.overflow = "hidden";
    }
  }
  return previewStyle;
};
const getEditCanvasConfigStyle = (canvas) => {
  const computedBackground = canvas.selectColor ? { background: canvas.background } : {
    background: `url(${canvas.backgroundImage}) center center / cover no-repeat !important`
  };
  return {
    position: "relative",
    width: canvas.width ? `${canvas.width || 100}px` : "100%",
    height: canvas.height ? `${canvas.height}px` : "100%",
    ...computedBackground
  };
};
export {
  getComponentAttrStyle,
  getEditCanvasConfigStyle,
  getPreviewConfigStyle,
  getSizeStyle,
  getStatusStyle
};
