import { getTypographyStyles as o, getSingleLineInputLineHeight as n } from "../../../../utils/getTypographyStyles.js";
import { getHeightSizeStyles as s, getSizeStyles as d } from "../../../../utils/getSizeStyles/getSizeStyles.js";
import { getSharedInputStateColors as t } from "../../../../utils/getSharedInputStateColors.js";
import { getInputAlignmentIconButtonOverrides as l } from "../../../../utils/getInputAlignmentIconButtonOverrides/getInputAlignmentIconButtonOverrides.js";
const g = {
  /**
   * Estilos para el root cuando esta en Desktop 💻
   */
  rootDesktop: ({ theme: a, ownerState: r }) => {
    const i = t(a, !!r?.error);
    return {
      // ↴ Overrides sizes ❌
      ...s(
        a.generalSettings.isMobile,
        r?.size || "medium",
        "action",
        (e) => ({
          height: `${e} !important`,
          minHeight: `${e} !important`,
          maxHeight: `${e} !important`
        })
      ),
      // Estilos globales del Input DateTimePicker en Desktop 🌎
      "& .MuiInputBase-root": {
        height: "100%",
        padding: 0,
        borderRadius: a.vars.size.borderRadius["r1-5"],
        backgroundColor: r?.variant === "contained" ? a.vars.palette.default.enabledOpacity : a.vars.palette.background.default,
        paddingLeft: a.vars.size.baseSpacings.sp1,
        "& input": {
          padding: 0,
          paddingLeft: a.vars.size.baseSpacings.sp1,
          paddingRight: a.vars.size.baseSpacings.sp3,
          ...o(
            a.generalSettings.isMobile,
            r?.size || "medium",
            "bodyStandard"
          ),
          ...n(),
          "&::placeholder": {
            color: a.vars.palette.text.disabled,
            opacity: 1
          }
        },
        "& .MuiInputAdornment-root": {
          margin: 0,
          ...d(
            a,
            r?.size || "medium",
            "action",
            (e) => ({
              height: `calc(${e} - 2px)`,
              minHeight: `calc(${e} - 2px)`,
              maxHeight: `calc(${e} - 2px)`,
              minWidth: `calc(${e} - 2px)`
            })
          )
        },
        // ↴ Overrides ❌
        "&.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
          outline: 0,
          minHeight: 0,
          ...r?.variant !== "text" && {
            border: a.vars.size.borderStroke.actionInput
          },
          ...r?.variant === "text" && {
            border: 0,
            borderBottom: a.vars.size.borderStroke.actionInput
          },
          borderColor: i.borderColor,
          borderRadius: a.vars.size.borderRadius["r1-5"]
        },
        // ↴ Overrides ❌
        "&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
          outline: 0,
          ...r?.variant !== "text" && {
            border: a.vars.size.borderStroke.actionInput
          },
          ...r?.variant === "text" && {
            border: 0,
            borderBottom: a.vars.size.borderStroke.actionInput
          },
          borderColor: i.focusBorderColor
        },
        // ↴ Overrides ❌
        "&.MuiOutlinedInput-root.Mui-focused .M4LIcon-icon": {
          backgroundColor: i.iconColor
        },
        "&.Mui-focused": {
          ...r?.variant === "text" ? {
            boxShadow: `0px 1.5px 0px 0px ${i.focusRingColor} !important`
          } : {
            boxShadow: `0px 0px 0px 1.5px ${i.focusRingColor} !important`
          }
        },
        // ↴ Overrides ❌
        ...!r?.disabled && {
          "&:hover": {
            background: i.hoverBackgroundColor,
            "& .MuiOutlinedInput-notchedOutline": {
              borderColor: i.hoverBorderColor
            }
          },
          "&:active": {
            background: a.vars.palette.background.default
          }
        }
      }
    };
  },
  /**
   * Estilos para el root cuando esta en Mobile 📱
   */
  rootMobile: ({ theme: a, ownerState: r }) => {
    const i = t(a, !!r?.error);
    return {
      // ↴ Overrides sizes ❌
      ...s(
        a.generalSettings.isMobile,
        r?.size || "medium",
        "action",
        (e) => ({
          height: `${e} !important`,
          minHeight: `${e} !important`,
          maxHeight: `${e} !important`
        })
      ),
      // Estilos globales del Input DateTimePicker en Desktop 🌎
      "& .MuiInputBase-root": {
        height: "100%",
        padding: 0,
        borderRadius: a.vars.size.borderRadius["r1-5"],
        backgroundColor: r?.variant === "contained" ? a.vars.palette.default.enabledOpacity : a.vars.palette.background.default,
        paddingLeft: a.vars.size.baseSpacings.sp1,
        "& input": {
          padding: 0,
          paddingLeft: a.vars.size.baseSpacings.sp1,
          paddingRight: a.vars.size.baseSpacings.sp3,
          ...o(
            a.generalSettings.isMobile,
            r?.size || "medium",
            "bodyStandard"
          ),
          ...n()
        },
        // ↴ Overrides ❌
        "&.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
          outline: 0,
          minHeight: 0,
          ...r?.variant !== "text" && {
            border: a.vars.size.borderStroke.actionInput
          },
          ...r?.variant === "text" && {
            border: 0,
            borderBottom: a.vars.size.borderStroke.actionInput
          },
          borderColor: i.borderColor,
          borderRadius: a.vars.size.borderRadius["r1-5"]
        },
        // ↴ Overrides ❌
        "&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
          outline: 0,
          ...r?.variant !== "text" && {
            border: a.vars.size.borderStroke.actionInput
          },
          ...r?.variant === "text" && {
            border: 0,
            borderBottom: a.vars.size.borderStroke.actionInput
          },
          borderColor: i.focusBorderColor
        },
        "&.Mui-focused": {
          ...r?.variant === "text" ? {
            boxShadow: `0px 1.5px 0px 0px ${i.focusRingColor} !important`
          } : {
            boxShadow: `0px 0px 0px 1.5px ${i.focusRingColor} !important`
          }
        },
        // ↴ Overrides ❌
        ...!r?.disabled && {
          "&:hover": {
            background: i.hoverBackgroundColor,
            "& .MuiOutlinedInput-notchedOutline": {
              borderColor: i.hoverBorderColor
            }
          },
          "&:active": {
            background: a.vars.palette.background.default
          }
        }
      }
    };
  },
  /**
   * Estilos para el popper de Material UI
   */
  popper: ({ theme: a, ownerState: r }) => ({
    "&&&": {
      zIndex: a.vars.zIndex.modal,
      marginTop: `${a.vars.size.baseSpacings.sp2} !important`,
      "& .MuiPickersDay-root.Mui-selected": {
        backgroundColor: a.vars.palette.primary.enabled,
        "&:hover": {
          backgroundColor: a.vars.palette.primary.hover
        },
        "&:active": {
          backgroundColor: a.vars.palette.primary.active
        }
      },
      "& .MuiMultiSectionDigitalClockSection-item": {
        borderRadius: a.vars.size.borderRadius.r1,
        "&.Mui-selected": {
          backgroundColor: a.vars.palette.primary.enabled,
          "&:hover": {
            backgroundColor: a.vars.palette.primary.hover
          },
          "&:active": {
            backgroundColor: a.vars.palette.primary.active
          }
        }
      },
      "& .MuiDivider-root": {
        borderColor: a.vars.palette.border.secondary
      },
      // Estilos globales del MuiPickersLayout-root 🌎
      "& .MuiPaper-root": {
        paddingTop: a.vars.size.baseSpacings.sp3,
        borderRadius: a.vars.size.borderRadius.r2,
        backgroundColor: a.vars.palette.background.default,
        boxShadow: a.vars.customShadows.z4
      },
      // Estilos globales del MuiPickersLayout-root 🌎
      "& .MuiPickersLayout-root": {
        gap: `0px 0px ${a.vars.size.baseSpacings.sp1} 0px`,
        "& .MuiPickersLayout-contentWrapper": {
          // ↴ Overrides ❌
          // paddingLeft: theme.vars.size.baseSpacings.sp3,
          // paddingRight: theme.vars.size.baseSpacings.sp3,
          // Estilos específicos para el primer div hijo directo
          "& > div:first-of-type": {
            height: "265px"
          }
        }
      },
      // Estilos globales del MuiDateCalendar-root 🌎
      "& .MuiDateCalendar-root": {
        display: "flex",
        width: "fit-content",
        position: "relative",
        top: -1,
        gap: a.vars.size.baseSpacings.sp3,
        padding: a.vars.size.baseSpacings.sp1,
        // ↴ Overrides ❌
        "& .MuiYearCalendar-root": {
          // Fix en el height
          height: "218px",
          "& .MuiPickersYear-root": {
            "& .MuiPickersYear-yearButton": {
              width: "fit-content",
              padding: `0px ${a.vars.size.baseSpacings.sp3}`,
              borderRadius: a.vars.size.borderRadius.r1,
              "&:hover": {
                background: a.vars.palette.default.hoverOpacity
              },
              "&:active": {
                background: a.vars.palette.default.active
              },
              "&.Mui-selected": {
                background: a.vars.palette.primary.enabled,
                "&:hover": {
                  background: a.vars.palette.primary.hover
                },
                "&:active": {
                  background: a.vars.palette.primary.active
                }
              },
              ...s(
                a.generalSettings.isMobile,
                r?.size || "small",
                "action",
                (i) => ({
                  minHeight: i,
                  height: i,
                  maxHeight: i
                })
              ),
              ...o(
                a.generalSettings.isMobile,
                r?.size || "medium",
                "bodyStandard"
              )
            }
          }
        },
        // ↴ Overrides ❌
        "& .MuiDayCalendar-root": {
          width: "fit-content",
          padding: a.vars.size.baseSpacings.sp2,
          "& .MuiDayCalendar-header": {
            display: "flex",
            gap: a.vars.size.baseSpacings.sp1,
            "& .MuiTypography-root": {
              margin: 0,
              ...o(
                a.generalSettings.isMobile,
                r?.size || "medium",
                "bodyStandard"
              ),
              ...s(
                a.generalSettings.isMobile,
                r?.size || "small",
                "action",
                (i) => ({
                  minHeight: i,
                  height: i,
                  maxHeight: i,
                  minWidth: i,
                  width: i,
                  maxWidth: i
                })
              )
            }
          },
          "& .MuiDayCalendar-weekContainer": {
            display: "flex",
            margin: 0,
            paddingTop: a.vars.size.baseSpacings.sp1,
            gap: a.vars.size.baseSpacings.sp1
          }
        }
      },
      // Estilos globales del MuiMultiSectionDigitalClock-root 🌎
      "& .MuiMultiSectionDigitalClock-root": {
        padding: a.vars.size.baseSpacings.sp1,
        // ↴ Overrides ❌
        "& .MuiList-root": {
          display: "flex",
          width: "fit-content",
          flexDirection: "column",
          overflow: "overlay",
          borderColor: a.vars.palette.border.secondary,
          paddingRight: a.vars.size.baseSpacings.sp2,
          paddingLeft: a.vars.size.baseSpacings.sp2,
          gap: a.vars.size.baseSpacings.sp2,
          "& .MuiButtonBase-root": {
            margin: 0,
            ...s(
              a.generalSettings.isMobile,
              r?.size || "small",
              "action",
              (i) => ({
                minHeight: i,
                height: i,
                maxHeight: i,
                minWidth: i,
                width: i,
                maxWidth: i
              })
            ),
            ...o(
              a.generalSettings.isMobile,
              r?.size || "medium",
              "bodyStandard"
            )
          }
        }
      },
      // Estilos globales del MuiDialogActions-root 🌎
      "& .MuiDialogActions-root": {
        paddingRight: a.vars.size.baseSpacings.sp3,
        // ↴ Overrides ❌
        "& .MuiButtonBase-root": {
          margin: 0,
          ...s(
            a.generalSettings.isMobile,
            r?.size || "small",
            "action",
            (i) => ({
              minHeight: i,
              height: i,
              maxHeight: i,
              minWidth: i,
              width: i,
              maxWidth: i
            })
          ),
          ...o(
            a.generalSettings.isMobile,
            r?.size || "medium",
            "bodyStandard"
          )
        }
      }
    }
  }),
  /**
   * estilos para paper de Material UI
   */
  paper: ({ theme: a, ownerState: r }) => ({
    minWidth: "0 !important",
    padding: a.vars.size.baseSpacings.sp3,
    borderRadius: a.vars.size.borderRadius.r1,
    "& .MuiPickersLayout-root": {
      gap: a.vars.size.baseSpacings.sp2
    },
    // Estilos globales del MuiPickersLayout-root 🌎
    "& .MuiPickersToolbar-root": {
      gridArea: " 1 / 2 / auto / 2 !important",
      padding: 0,
      // ↴ Overrides ❌
      "& > span:first-of-type": {
        ...o(
          a.generalSettings.isMobile,
          r?.size || "medium",
          "bodyStandard"
        )
      },
      // ↴ Overrides ❌
      "& .MuiPickersToolbar-content": {
        "& .MuiDateTimePickerToolbar-dateContainer": {
          "& button > span": {
            color: a.vars.palette.text.primary,
            "&.Mui-selected": {
              color: a.vars.palette.primary.selected
            }
          },
          "& button:nth-of-type(1) > span": {
            ...o(
              a.generalSettings.isMobile,
              r?.size || "medium",
              "bodyStandard"
            )
          },
          "& button:nth-of-type(2) > span": {
            ...o(
              a.generalSettings.isMobile,
              r?.size || "medium",
              "subtitleStandard"
            )
          }
        },
        "& .MuiDateTimePickerToolbar-timeContainer": {
          gap: a.vars.size.baseSpacings.sp2,
          "& button > span": {
            color: a.vars.palette.text.primary,
            "&.Mui-selected": {
              color: a.vars.palette.primary.selected
            }
          },
          "& .MuiDateTimePickerToolbar-timeDigitsContainer": {
            alignItems: "center",
            "& > button": {
              height: "fit-content"
            },
            "& button:nth-of-type(1) > span, & button:nth-of-type(2) > span": {
              ...o(
                a.generalSettings.isMobile,
                r?.size || "medium",
                "subtitleStandard"
              )
            }
          },
          "& .MuiDateTimePickerToolbar-separator": {
            display: "flex",
            justifyContent: "center",
            alignSelf: "center",
            ...o(
              a.generalSettings.isMobile,
              r?.size || "medium",
              "subtitleStandard"
            )
          },
          "& .MuiDateTimePickerToolbar-ampmSelection": {
            margin: 0,
            display: "flex",
            justifyContent: "center",
            "& button:nth-of-type(1) > span, & button:nth-of-type(2) > span": {
              display: "flex",
              alignItems: "center",
              ...s(
                a.generalSettings.isMobile,
                r?.size || "small",
                "action",
                (i) => ({
                  height: i,
                  minHeight: i,
                  maxHeight: i
                })
              ),
              ...o(
                a.generalSettings.isMobile,
                r?.size || "medium",
                "bodyStandard"
              )
            }
          }
        }
      }
    },
    // ↴ Overrides ❌
    "& .MuiPickersLayout-contentWrapper": {
      // ↴ Overrides Tabs ❌
      "& .MuiTabs-root": {
        height: "fit-content",
        minHeight: "auto",
        width: "fit-content",
        boxShadow: "none",
        background: a.vars.palette.default.enabled,
        paddingBottom: a.vars.size.baseSpacings.sp0,
        gap: a.vars.size.baseSpacings.sp0,
        borderRadius: a.vars.size.borderRadius.r1,
        borderBottomLeftRadius: a.vars.size.borderRadius.r0,
        borderBottomRightRadius: a.vars.size.borderRadius.r0,
        "& .MuiTab-root": {
          border: a.vars.size.borderStroke.container,
          borderColor: a.vars.palette.default.enabled,
          borderTopLeftRadius: `calc(${a.vars.size.borderRadius.r1} - 1px)`,
          borderTopRightRadius: `calc(${a.vars.size.borderRadius.r1} - 1px)`,
          ...s(
            a.generalSettings.isMobile,
            r?.size || "small",
            "container",
            (i) => ({
              minHeight: i,
              height: i,
              maxHeight: i,
              minWidth: i,
              width: i,
              maxWidth: i
            })
          ),
          "& .MuiTouchRipple-root": {
            display: "none"
          }
        },
        "& .MuiTab-root.Mui-selected": {
          background: a.vars.palette.background.default,
          "&::after": {
            content: '""',
            width: "70%",
            transform: "translateX(20%)",
            height: a.vars.size.borderRadius["r0-5"],
            left: 0,
            top: 0,
            backgroundColor: r?.tabSkeleton ? a.vars.palette.skeleton.default : r?.tabDisabled ? a.vars.palette.text.disabled : a.vars.palette.primary.enabled,
            borderEndStartRadius: a.vars.size.borderRadius.r1,
            borderEndEndRadius: a.vars.size.borderRadius.r1,
            position: "absolute"
          }
        },
        "& .MuiTabs-indicator": {
          display: "none"
        }
      },
      "& .MuiDateCalendar-root": {
        display: "flex",
        width: "fit-content",
        height: "fit-content",
        gap: a.vars.size.baseSpacings.sp3,
        padding: a.vars.size.baseSpacings.sp3,
        border: a.vars.size.borderStroke.container,
        borderRadius: a.vars.size.borderRadius.r1,
        borderTopLeftRadius: 0,
        borderColor: a.vars.palette.border.default,
        margin: 0,
        "& .MuiYearCalendar-root": {
          // Fix en el height
          height: "218px",
          "& .MuiPickersYear-yearButton": {
            margin: 0,
            borderRadius: a.vars.size.borderRadius.r1,
            "&:hover": {
              background: a.vars.palette.default.hoverOpacity
            },
            "&:active": {
              background: a.vars.palette.default.active
            },
            "&.Mui-selected": {
              background: a.vars.palette.primary.enabled,
              "&:hover": {
                background: a.vars.palette.primary.hover
              },
              "&:active": {
                background: a.vars.palette.primary.active
              }
            },
            ...s(
              a.generalSettings.isMobile,
              r?.size || "small",
              "action",
              (i) => ({
                minHeight: i,
                height: i,
                maxHeight: i
              })
            ),
            ...o(
              a.generalSettings.isMobile,
              r?.size || "medium",
              "bodyStandard"
            )
          }
        }
      },
      // ↴ Overrides ❌
      "& .MuiDayCalendar-root": {
        width: "fit-content",
        padding: a.vars.size.baseSpacings.sp2,
        "& .MuiDayCalendar-header": {
          display: "flex",
          gap: a.vars.size.baseSpacings.sp1,
          "& .MuiTypography-root": {
            margin: 0,
            ...o(
              a.generalSettings.isMobile,
              r?.size || "medium",
              "bodyStandard"
            ),
            ...s(
              a.generalSettings.isMobile,
              r?.size || "small",
              "action",
              (i) => ({
                minHeight: i,
                height: i,
                maxHeight: i,
                minWidth: i,
                width: i,
                maxWidth: i
              })
            )
          }
        },
        "& .MuiDayCalendar-weekContainer": {
          display: "flex",
          margin: 0,
          paddingTop: a.vars.size.baseSpacings.sp1,
          gap: a.vars.size.baseSpacings.sp1
        }
      },
      "& .MuiTimeClock-root": {
        width: "fit-content",
        border: a.vars.size.borderStroke.container,
        borderRadius: a.vars.size.borderRadius.r1,
        borderColor: a.vars.palette.border.default,
        padding: a.vars.size.baseSpacings.sp1,
        "& .MuiClock-clock": {
          background: a.vars.palette.default.enabled
        }
      },
      "& .MuiPickersArrowSwitcher-root": {
        top: 0,
        right: 0,
        display: "flex",
        alignSelf: "center",
        position: "relative"
      },
      "& .MuiPickersLayout-actionBar": {
        padding: `${a.vars.size.baseSpacings.sp1} 0px`
      }
    },
    // Estilos globales del MuiDialogActions-root 🌎
    "& .MuiDialogActions-root": {
      // ↴ Overrides ❌
      "& .MuiButtonBase-root": {
        margin: 0,
        ...s(
          a.generalSettings.isMobile,
          r?.size || "small",
          "action",
          (i) => ({
            minHeight: i,
            height: i,
            maxHeight: i,
            minWidth: i
          })
        ),
        ...o(
          a.generalSettings.isMobile,
          r?.size || "medium",
          "bodyStandard"
        )
      },
      "& .MuiButtonBase-root:nth-of-type(1)": {
        color: a.vars.palette.text.secondary,
        textTransform: "lowercase"
      },
      "& .MuiButtonBase-root:nth-of-type(2)": {
        textTransform: "lowercase"
      }
    }
  }),
  /**
   * Estilos de pickersDay de Mui x
   */
  pickersDay: ({ theme: a, ownerState: r }) => ({
    margin: 0,
    borderRadius: a.vars.size.borderRadius.r1,
    "&:hover": {
      background: a.vars.palette.default.hoverOpacity
    },
    "&:active": {
      background: a.vars.palette.default.active
    },
    "&.Mui-selected": {
      background: a.vars.palette.primary.enabled,
      "&:hover": {
        background: a.vars.palette.primary.hover
      },
      "&:active": {
        background: a.vars.palette.primary.active
      }
    },
    ...s(
      a.generalSettings.isMobile,
      r?.size || "small",
      "action",
      (i) => ({
        minHeight: i,
        height: i,
        maxHeight: i,
        minWidth: i,
        width: i,
        maxWidth: i
      })
    )
  }),
  /**
   *Estilos de pickersCalendarHeader de Mui x
   */
  pickersCalendarHeader: ({ theme: a, ownerState: r }) => ({
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    margin: 0,
    padding: `0px ${a.vars.size.baseSpacings.sp2}`,
    "& .MuiPickersCalendarHeader-labelContainer": {
      border: a.vars.size.borderStroke.actionInput,
      borderColor: a.vars.palette.border.default,
      ...s(
        a.generalSettings.isMobile,
        r?.size || "medium",
        "action",
        (i) => ({
          height: i,
          minHeight: i,
          maxHeight: i
        })
      ),
      margin: 0,
      paddingLeft: a.vars.size.baseSpacings.sp1,
      borderRadius: a.vars.size.borderRadius.r1,
      "& .MuiPickersCalendarHeader-label": {
        margin: 0,
        paddingLeft: a.vars.size.baseSpacings.sp1,
        paddingRight: a.vars.size.baseSpacings.sp3,
        ...o(
          a.generalSettings.isMobile,
          r?.size || "medium",
          "bodyStandard"
        )
      }
    }
  }),
  // Local input trigger override for the shared alignment story.
  /**
   * Estilos para el iconButton del input, se aplican solo si el iconButton esta dentro de un InputAdornment (isInputAdornment) y se encargan de alinear el icono con el texto del input. Se utilizan las funciones getInputAlignmentIconButtonOverrides para obtener los estilos necesarios para la alineación dependiendo del tamaño del componente.
   */
  iconButton: ({ theme: a, ownerState: r }) => ({
    ...r?.isInputAdornment ? l(a, r?.size) : {}
  }),
  /**
   * estilos para el skeleton 🦴
   */
  skeleton: ({ theme: a, ownerState: r }) => ({
    ...s(
      a.generalSettings.isMobile,
      r?.size || "small",
      "action",
      (i) => ({
        height: i,
        minHeight: i,
        maxHeight: i
      })
    )
  })
};
export {
  g as dateTimePickerStyles
};
