import { getTypographyStyles as r } from "../../utils/getTypographyStyles.js";
import { getSizeStyles as e } from "../../utils/getSizeStyles/getSizeStyles.js";
const t = {
  /**
   * Styles for the window base wrapper component.
   */
  wrapperWindowBase: ({ theme: a, ownerState: o }) => ({
    "&": {
      position: "relative",
      height: "100%",
      width: "100%",
      display: "flex",
      flexDirection: "column",
      borderRadius: o?.variant === "outlined" ? a.vars.size.borderRadius.r2 : "unset",
      backgroundColor: a.vars.palette.background.default,
      overflow: "hidden",
      ...o?.variant === "outlined" && {
        ...o?.selected ? {
          ...o?.emergeType === "layout" ? {
            background: `linear-gradient(to bottom, 
            ${a.vars.palette.primary.opacityGradient1}, 
            ${a.vars.palette.primary.opacityGradient2})`,
            "&::before": {
              content: '""',
              position: "absolute",
              inset: "1px",
              background: a.vars.palette.background.default,
              borderRadius: "6.7px"
            }
          } : {
            boxShadow: `inset 0px 0px 0 1px ${a.vars.palette?.border.main}`
          }
        } : {
          boxShadow: o?.emergeType === "layout" ? `inset 0px 0px 0 1px ${a.vars.palette?.border.secondary}` : "unset"
        }
      },
      ...o?.emergeType === "popup" && {
        "&&&": {
          boxShadow: a.vars.customShadows.z1,
          border: `1px solid ${a.vars.palette?.border.secondary}`,
          borderRadius: a.vars.size.borderRadius.r3,
          ...o?.selected && {
            boxShadow: a.vars.customShadows.z4,
            border: `1px solid ${a.vars.palette?.primary.activeOpacity}`
          }
        }
      },
      ...o?.emergeType === "layout" && {
        ...o?.selected && !o?.maximized ? {
          boxShadow: a.vars.customShadows.primary
        } : {}
      },
      ...o?.emergeType === "modal" && {
        boxShadow: `${a.vars.customShadows.z3}!important`
      }
    }
  }),
  //
  /**
   * Styles for the content of the window base component.
   */
  contentWindowBase: ({ ownerState: a, theme: o }) => ({
    padding: a?.emergeType === "layout" ? o.vars.size.baseSpacings.sp5 : o.vars.size.baseSpacings.sp4,
    overflow: "auto",
    width: "100%",
    height: "100%",
    zIndex: 1,
    ...a?.collapsed && {
      display: "none"
    }
  }),
  /**
   * Window  component content Styles by emergeType
   */
  windowContainerComponent: () => ({
    //Mover el estilado para adentro
    position: "relative",
    display: "flex",
    width: "100%",
    height: "100%",
    overflow: "visible"
  }),
  /**
   * Styles for the header of the window base component.
   */
  headerWindowComponent: ({ theme: a, ownerState: o }) => ({
    width: "100%",
    display: "flex",
    padding: a.vars.size.baseSpacings.sp1,
    marginTop: 1,
    ...(o?.emergeType === "popup" || o?.emergeType === "modal") && {
      padding: `${a.vars.size.baseSpacings["sp2-5"]} ${a.vars.size.baseSpacings.sp2} 0 ${a.vars.size.baseSpacings.sp2}`
    },
    alignItems: "center",
    justifyContent: "space-between",
    flexShrink: 0,
    alignSelf: "stretch",
    cursor: o?.draggable ? "all-scroll" : "default",
    position: "relative",
    ...o?.emergeType === "layout" || o?.emergeType === "modal" ? e(
      a,
      o?.size || "medium",
      "container",
      (i) => ({
        minHeight: i
      })
    ) : {
      ...e(
        a,
        o?.size || "medium",
        "action",
        (i) => ({
          minHeight: i,
          height: "auto"
        })
      )
    },
    ...o?.selected && o?.emergeType === "layout" && o?.variant === "outlined" && !o?.maximized ? {
      background: `linear-gradient(to right, ${a.vars.palette.primary.opacity}, #ffffff00);`,
      "&::before": {
        content: '""',
        position: "absolute",
        bottom: 0,
        left: 0,
        width: "100%",
        height: "1px"
      }
    } : {
      background: "transparent"
    }
  }),
  /**
   * Styles for the content of the header of the window base component.
   */
  headerContentWindowBase: ({ theme: a }) => ({
    width: "100%",
    minWidth: "20px",
    display: "flex",
    alignItems: "center",
    paddingLeft: a.vars.size.baseSpacings.sp1,
    paddingRight: a.vars.size.baseSpacings.sp1,
    color: a.vars.palette.text.primary,
    gap: a.vars.size.baseSpacings.sp0,
    overflow: "hidden"
  }),
  /**
   * Styles for the title of the header of the window base component.
   */
  headerTitleWindowBase: ({ theme: a, ownerState: o }) => ({
    minWidth: "30px",
    ...o?.selected && o?.emergeType !== "modal" ? {
      color: `${a.vars.palette.primary.semanticText} !important`
    } : {
      color: `${a.vars.palette.text.secondary} !important`
    },
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis",
    paddingLeft: a.vars.size.baseSpacings.sp2,
    userSelect: "none",
    cursor: o?.draggable ? "all-scroll" : "default",
    ...o?.maximized && {
      "&&&": {
        ...r(
          a.generalSettings.isMobile,
          o?.size || "small",
          "paragraphDens"
        )
      }
    }
  }),
  /**
   * Styles for the subtitle container of the header of the window base component.
   */
  containerTitleSubtitle: ({ theme: a }) => ({
    display: "flex",
    alignItems: "center",
    gap: a.vars.size.baseSpacings["sp0-5"],
    "& .MuiSkeleton-root.M4LIcon-root": {
      width: a.vars.size.baseSpacings.sp3,
      height: a.vars.size.baseSpacings.sp3
    },
    overflow: "hidden",
    width: "100%",
    userSelect: "none"
  }),
  /**
   * Styles for the subtitle of the header of the window base component.
   */
  headerSubTitleWindowBase: ({ theme: a, ownerState: o }) => ({
    width: "auto !important",
    height: "auto !important",
    ...o?.selected && o?.emergeType !== "modal" ? {
      color: `${a.vars.palette.primary.semanticText} !important`
    } : {
      color: `${a.vars.palette.text.secondary} !important`
    },
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis",
    paddingLeft: a.vars.size.baseSpacings.sp1,
    cursor: o?.draggable ? "all-scroll" : "default"
  }),
  /**
   * Styles for the icon of the header of the window base component.
   */
  headerIconWindowBase: ({ theme: a, ownerState: o }) => ({
    "& .M4LIcon-icon": {
      ...o?.selected && o?.emergeType !== "modal" ? {
        backgroundColor: `${a.vars.palette.primary.semanticText} !important`
      } : {
        backgroundColor: `${a.vars.palette.text.secondary} !important`
      }
    }
  }),
  /**
   * Styles for the icons wrapper of the window base component.
   */
  iconsWrapperWindowBase: ({ theme: a, ownerState: o }) => ({
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
    flexDirection: "row",
    flexWrap: "nowrap",
    cursor: "pointer",
    height: "100%",
    gap: a.vars.size.baseSpacings["sp0-5"],
    // override the default styles of the icon button
    "& .window-actions.MuiSkeleton-root": {
      ...e(
        a,
        o?.size || "medium",
        "base",
        (i) => ({
          height: `${i}!important`,
          width: `${i}!important`
        })
      ),
      marginLeft: a.vars.size.baseSpacings.sp1,
      marginRight: a.vars.size.baseSpacings.sp1,
      marginBottom: o?.emergeType === "layout" ? "auto" : "unset"
    },
    '& .window-actions[class*="M4LIconButton-styledMUIIconButton"]': {
      ...e(
        a,
        o?.size || "medium",
        "base",
        (i) => ({
          height: `${i}!important`,
          width: `${i}!important`
        })
      ),
      marginLeft: a.vars.size.baseSpacings.sp1,
      marginRight: a.vars.size.baseSpacings.sp1,
      marginBottom: o?.emergeType === "layout" ? "auto!important" : "unset!important",
      "&.collapse-toggle": {
        ...o?.maximized && {
          display: "none"
        },
        "&:hover": {
          backgroundColor: `${a.vars.palette.chips.orange.contained.backgroundColor} !important`,
          "& .M4LIcon-icon": {
            backgroundColor: `${a.vars.palette.chips.orange.contained.backgroundColorTone} !important`
          }
        },
        "&:active": {
          backgroundColor: `${a.vars.palette.chips.orange.contained.backgroundHover} !important`,
          "& .M4LIcon-icon": {
            backgroundColor: `${a.vars.palette.chips.orange.contained.backgroundColorTone} !important`
          }
        }
      },
      "&.expand-toggle": {
        ...o?.collapsed && {
          display: "none"
        },
        "&:hover": {
          backgroundColor: `${a.vars.palette.chips.forest.contained.backgroundColor} !important`,
          "& .M4LIcon-icon": {
            backgroundColor: `${a.vars.palette.chips.forest.contained.backgroundColorTone} !important`
          }
        },
        "&:active": {
          backgroundColor: `${a.vars.palette.chips.forest.contained.backgroundHover} !important`,
          "& .M4LIcon-icon": {
            backgroundColor: `${a.vars.palette.chips.forest.contained.backgroundColorTone} !important`
          }
        }
      },
      "&.close-button": {
        "&:hover": {
          backgroundColor: `${a.vars.palette.chips.error.contained.backgroundColor} !important`,
          "& .M4LIcon-icon": {
            backgroundColor: `${a.vars.palette.chips.error.contained.backgroundColorTone} !important`
          }
        },
        "&:active": {
          backgroundColor: `${a.vars.palette.chips.error.contained.backgroundHover} !important`,
          "& .M4LIcon-icon": {
            backgroundColor: `${a.vars.palette.chips.error.contained.backgroundColorTone} !important`
          }
        }
      },
      "&.MuiButtonBase-root:not(:hover, :active, :focus, .M4LIconButton-selected) .M4LIcon-root .M4LIcon-icon": {
        backgroundColor: `${a.vars.palette.text.disabled} !important`
      }
    },
    "& .window-actions:first-of-type": {
      marginLeft: `${a.vars.size.baseSpacings.sp4} !important`
    }
  }),
  /**
   * Styles for the dot icon of the window base component.
   */
  pointIcon: ({ theme: a, ownerState: o }) => ({
    "& .M4LIcon-icon": {
      ...o?.selected && o?.emergeType !== "modal" && o?.variant === "outlined" ? {
        backgroundColor: `${a.vars.palette.primary.semanticText} !important`
      } : {
        backgroundColor: `${a.vars.palette.text.secondary} !important`
      }
    },
    ...e(
      a,
      o?.size || "medium",
      "base"
    )
  }),
  /**
   * Styles for the menu actions of the window base component.
   */
  menuActionsWindowBase: ({ theme: a, ownerState: o }) => ({
    ...o?.emergeType === "layout" ? {
      ...e(
        a,
        o?.size || "medium",
        "action"
      )
    } : {
      height: "auto!important"
    },
    ...o?.collapsed && {
      display: "none"
    }
  }),
  /**
   * Styles for the linear progress of the window base component.
   */
  linearProgressIndeterminate: ({ theme: a }) => ({
    borderBottomRightRadius: a.vars.size.borderRadius.r0,
    borderBottomLeftRadius: a.vars.size.borderRadius.r0
  }),
  /**
   * Styles for the content of the edition info.
   */
  contentEditionInfo: ({ theme: a }) => ({
    display: "flex",
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "flex-start",
    alignSelf: "stretch",
    gap: a.vars.size.baseSpacings.sp2,
    color: a.vars.palette.text.secondary,
    zIndex: 1,
    paddingTop: a.vars.size.baseSpacings.sp5,
    paddingBottom: 0,
    paddingLeft: a.vars.size.baseSpacings.sp5,
    paddingRight: a.vars.size.baseSpacings.sp5,
    "& > span": {
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis",
      maxWidth: "100%"
    }
  }),
  /**
   * Styles for the toast container of the window base component.
   */
  toastContainer: () => ({
    "&.Toastify__toast-container": {
      top: "20px !important",
      right: "24px !important"
    }
  }),
  /**
   * Styles for the container of the left actions of the window base component.
   */
  containerLeftActions: ({ theme: a, ownerState: o }) => ({
    display: "flex",
    gap: a.vars.size.baseSpacings.sp1,
    alignItems: "center",
    "& .M4LIconButton-styledMUIIconButton": {
      ...e(a, o?.size || "medium", "case", (i) => ({
        width: `${i}!important`,
        height: `${i}!important`
      }))
    },
    ...o?.collapsed && {
      display: "none"
    }
  })
};
export {
  t as windowBaseStyles
};
