import { jsx as d } from "react/jsx-runtime";
import s from "@mui/icons-material/KeyboardArrowDownRounded";
import { formLabelClasses as x, outlinedInputClasses as o, inputLabelClasses as c, autocompleteClasses as l, inputBaseClasses as m, menuClasses as b, buttonBaseClasses as g, menuItemClasses as f, alpha as u, createTheme as h } from "@mui/material";
import { mergeDeepRight as $ } from "ramda";
import { grey as z } from "@mui/material/colors";
const t = {
  small: "8px",
  medium: "10px"
}, C = {
  direction: "rtl",
  palette: {
    // TODO: should add PaletteColor fields too
    neutral: z
  },
  typography: {
    fontFamily: "IRANYekanX, roboto",
    h1: { fontSize: "36px", fontWeight: "bold" },
    h2: { fontSize: "30px", fontWeight: "bold" },
    h3: { fontSize: "24px", fontWeight: "bold" },
    h4: { fontSize: "20px", fontWeight: "bold" },
    h5: { fontSize: "18px", fontWeight: "bold" },
    h6: { fontSize: "16px", fontWeight: "bold" },
    subtitle1: { fontSize: "12px" },
    subtitle2: { fontSize: "11px", fontWeight: "bold" },
    body1: { fontSize: "14px" },
    body2: { fontSize: "12px" },
    button: { fontSize: "14px" },
    caption: { fontSize: "12px", fontWeight: "lighter" },
    overline: { fontSize: "13px", fontWeight: "lighter" }
  },
  shape: {
    borderRadius: 12
  },
  components: {
    MuiFormLabel: {
      styleOverrides: {
        root: ({ theme: e }) => ({
          fontSize: "0.875rem",
          [`&.${x.disabled}`]: {
            color: e.palette.neutral[400]
          }
        })
      }
    },
    MuiInputBase: {
      styleOverrides: {
        root: ({ theme: e }) => ({
          backgroundColor: "#fff",
          [`&.${o.root}.${o.disabled}`]: {
            background: e.palette.neutral[100],
            [`&.${o.notchedOutline}`]: {
              borderColor: e.palette.neutral[200]
            }
          },
          [`&.${o.root}.${o.disabled}:hover .${o.notchedOutline}`]: {
            borderColor: "unset"
          }
        }),
        disabled: ({ theme: e }) => ({
          backgroundColor: e.palette.neutral[100]
        })
      }
    },
    MuiIconButton: {
      styleOverrides: {
        root: ({ theme: e }) => ({
          borderRadius: e.shape.borderRadius
        })
      }
    },
    MuiButton: {
      styleOverrides: {
        root: ({ ownerState: e }) => ({
          ...e.size === "small" && {
            padding: "5px 10px"
          },
          ...e.size === "medium" && {
            padding: "8px 16px"
          },
          ...e.size === "large" && {
            padding: "11px 22px"
          },
          ...e.variant === "text" && e.size === "small" && {
            padding: 5
          },
          ...e.variant === "text" && e.size === "medium" && {
            padding: 8
          },
          ...e.variant === "text" && e.size === "large" && {
            padding: 11
          },
          //outlined buttons have 1px border. so we should decrement padding in all sizes by one.
          ...e.variant === "outlined" && e.size === "small" && {
            padding: "4px 9px"
          },
          ...e.variant === "outlined" && e.size === "medium" && {
            padding: "7px 15px"
          },
          ...e.variant === "outlined" && e.size === "large" && {
            padding: "10px 21px"
          }
        })
      }
    },
    MuiSelect: {
      defaultProps: {
        IconComponent: (e) => /* @__PURE__ */ d(s, { ...e })
      }
    },
    MuiInputLabel: {
      styleOverrides: {
        root: ({ theme: e, ownerState: r }) => ({
          fontSize: "0.875rem",
          transform: "translate(14px, 14px) scale(1)",
          ...r.size === "small" && {
            transform: "translate(14px, 9px) scale(1)"
          },
          [`&.${c.focused}`]: {
            color: a(e, r, "main")
          }
        }),
        shrink: {
          // Change the transform value when the input is focused or filled
          transform: "translate(14px, -6px) scale(0.75)"
        }
      }
    },
    MuiAutocomplete: {
      defaultProps: {
        size: "small",
        popupIcon: /* @__PURE__ */ d(s, {})
      },
      styleOverrides: {
        root: {
          // TODO write comment
          [`& .${o.root} .${l.input}`]: {
            padding: `calc(${t.medium} - 9px) 4px calc(${t.medium} - 9px) 5px`
          },
          [`& .${o.root}.${m.sizeSmall} .${l.input}`]: {
            padding: `calc(${t.small} - 6px) 4px calc(${t.small} - 6px) 8px`
          }
        },
        listbox: ({ theme: e }) => ({
          [`& .${l.option}`]: {
            padding: "4px 8px",
            margin: "8px 16px",
            color: e.palette.neutral[600],
            borderRadius: e.shape.borderRadius,
            ['&[aria-selected="true"]']: {
              background: e.palette.primary[50],
              color: e.palette.primary[500]
            }
          }
        })
      }
    },
    MuiList: {
      styleOverrides: {
        root: ({ theme: e }) => ({
          [`&.${b.list}`]: {
            padding: "12px 8px",
            [`& .${g.root}.${f.root}`]: {
              padding: "4px 8px",
              marginBottom: 4,
              color: e.palette.neutral[600],
              borderRadius: e.shape.borderRadius,
              ['&[aria-selected="true"]']: {
                background: e.palette.primary[50],
                color: e.palette.primary[500]
              }
            }
          }
        })
      }
    },
    MuiOutlinedInput: {
      styleOverrides: {
        input: ({ ownerState: e }) => ({
          height: "2em",
          ...!e.multiline && {
            padding: `${t[e.size || "medium"]} 14px`
          }
        }),
        root: ({ theme: e, ownerState: r }) => ({
          lineHeight: "2em",
          fontSize: r.size === "small" ? "0.75rem" : "0.875rem",
          [`& .${o.notchedOutline}`]: {
            fontSize: "0.875rem",
            borderColor: e.palette.neutral[500],
            "& legend": {
              visibility: "visible",
              background: "#fff"
            }
          },
          [`&:hover .${o.notchedOutline}`]: {
            borderColor: a(e, r, "main")
          },
          [`&.${o.focused} .${o.notchedOutline}`]: {
            borderWidth: "1px",
            borderColor: a(e, r, "main"),
            boxShadow: `0 0 8px 0 ${u(a(e, r, "main"), 0.2)}`
          },
          [`&.${o.error} .${o.input}`]: {
            backgroundColor: e.palette.error[50],
            borderRadius: e.shape.borderRadius,
            borderColor: e.palette.error.main
          },
          [`&.${o.focused}&.${o.error} .${o.notchedOutline}`]: {
            borderColor: e.palette.error.main,
            boxShadow: `0 0 8px 0 ${u(e.palette.error.main, 0.1)}`
          }
        })
      }
    },
    MuiPaginationItem: {
      styleOverrides: {
        root: ({ theme: e }) => ({
          width: "32px",
          backgroundColor: "#F0F2F4",
          borderRadius: e.spacing(1.5),
          "&:hover": {
            backgroundColor: "#CCE6FF"
          },
          "&.Mui-selected , &.Mui-selected:hover": {
            backgroundColor: "#339DFF",
            color: "#fff"
          },
          "&.MuiPaginationItem-ellipsis": {
            backgroundColor: "inherit"
          }
        })
      }
    }
  }
};
function R(e = {}, ...r) {
  const p = $(C, e), i = h(p, ...r);
  return i.shadows = y(i.shadows), i;
}
const y = (e) => Object.assign(e, {
  2: "0px 1px 2px 0px rgba(0,0,0,0.10)",
  // Raised
  8: "0px 4px 8px 0px rgba(0,0,0,0.10)",
  // Overlay
  12: "0px 6px 12px 0px rgba(0,0,0,0.10)",
  // Sticky Nav
  16: "0px 8px 16px 0px rgba(0,0,0,0.10)",
  // Temporary Nav
  24: "0px 12px 24px 0px rgba(0,0,0,0.10)"
  // Pop out
}), a = (e, r, p = "main") => {
  var n;
  const { color: i = "primary" } = r;
  return (n = e.palette) == null ? void 0 : n[i === "inherit" ? "primary" : i][p];
};
export {
  R as createTheme
};
