import { ThemeOptions, createTheme } from "@mui/material";
import palette from "./palette";

// Used only to create transitions
const defaultFontSize = 18;
const muiTheme = createTheme();

const components: ThemeOptions["components"] = {
  MuiAppBar: {
    styleOverrides: {
      colorDefault: {
        backgroundColor: palette.background.paper,
        borderBottom: `1px solid ${palette.divider}`,
        boxShadow: "none",
      },
    },
  },
  MuiAvatar: {
    styleOverrides: {
      root: {
        fontSize: defaultFontSize,
        fontWeight: 600,
        letterSpacing: 0,
      },
    },
  },
  MuiButton: {
    styleOverrides: {
      root: {
        borderRadius: 8,
        textTransform: "none",
      },
      sizeSmall: {
        padding: "6px 16px",
      },
      sizeMedium: {
        padding: "8px 20px",
      },
      sizeLarge: {
        padding: "11px 24px",
      },
      textSizeSmall: {
        padding: "7px 12px",
      },
      textSizeMedium: {
        padding: "9px 16px",
      },
      textSizeLarge: {
        padding: "12px 16px",
      },
    },
  },
  MuiAlert: {
    styleOverrides: {
      root: {
        borderRadius: 8,
      },
    },
  },
  MuiPaper: {
    styleOverrides: {
      root: {
        borderRadius: 8,
      },
      rounded: {
        borderRadius: 8,
        [`&.MuiPaper-elevation1`]: {
          boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
        },
      },
      outlined: {
        borderStyle: "solid",
        borderWidth: 1,
        overflow: "hidden",
        borderColor: palette.neutral[200],
        borderRadius: 8,
      },
    },
  },
  MuiCard: {
    styleOverrides: {
      root: {
        borderRadius: 8,
        [`&.MuiPaper-elevation1`]: {
          boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
        },
      },
    },
  },
  MuiCardContent: {
    styleOverrides: {
      root: {
        padding: "16px 24px",
        "&:last-child": {
          paddingBottom: "16px",
        },
      },
    },
  },
  MuiDrawer: {
    styleOverrides: {
      root: {},
      paper: {
        borderRight: `1px solid ${palette.divider}`,
        boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.06)",
        backgroundColor: palette.background.paper,
      },
    },
  },
  MuiCardHeader: {
    defaultProps: {
      titleTypographyProps: {
        variant: "h6",
      },
      subheaderTypographyProps: {
        variant: "body2",
      },
    },
    styleOverrides: {
      root: {
        padding: "32px 24px 16px",
      },
    },
  },
  MuiCssBaseline: {
    styleOverrides: {
      "*": {
        boxSizing: "border-box",
      },
      html: {
        MozOsxFontSmoothing: "grayscale",
        WebkitFontSmoothing: "antialiased",
        display: "flex",
        flexDirection: "column",
        minHeight: "100%",
        width: "100%",
      },
      body: {
        display: "flex",
        flex: "1 1 auto",
        flexDirection: "column",
        minHeight: "100%",
        width: "100%",
      },
      "#__next": {
        display: "flex",
        flex: "1 1 auto",
        flexDirection: "column",
        height: "100%",
        width: "100%",
      },
      "#nprogress": {
        pointerEvents: "none",
      },
      "#nprogress .bar": {
        backgroundColor: palette.primary.main,
        height: 3,
        left: 0,
        position: "fixed",
        top: 0,
        width: "100%",
        zIndex: 2000,
      },
      ".swal2-custom-zindex": {
        zIndex: 10000, // Set z-index for SweetAlert2 modals
      },
    },
  },
  MuiInputBase: {
    styleOverrides: {
      root: {
        "&:not(.Mui-disabled)": {
          backgroundColor: "#ffffff",
          "&:hover": {
            backgroundColor: palette.neutral[50],
          },
          "&.Mui-focused": {
            backgroundColor: "#ffffff",
          },
        },
        "&.Mui-disabled": {
          backgroundColor: "#f8fafc",
          opacity: 1,
          "& .MuiInputBase-input": {
            color: palette.text.primary,
            cursor: "default",
            WebkitTextFillColor: "inherit",
          },
          "& fieldset": {
            backgroundColor: "transparent",
            boxShadow: "none",
          },
        },
      },
      input: {
        "&::placeholder": {
          opacity: 1,
        },
      },
    },
  },
  MuiInput: {
    styleOverrides: {
      input: {
        fontSize: defaultFontSize,
        fontWeight: 500,
        lineHeight: "24px",
        "&::placeholder": {
          color: palette.text.secondary,
        },
      },
    },
  },
  MuiAutocomplete: {
    styleOverrides: {
      root: {
        "& .MuiFilledInput-root": {
          paddingTop: 16,
          paddingBottom: 8,
        },
      },
    },
  },
  MuiFilledInput: {
    styleOverrides: {
      root: {
        backgroundColor: "transparent",
        borderRadius: 8,
        borderStyle: "solid",
        borderWidth: 1,
        overflow: "hidden",
        borderColor: palette.neutral[200],
        transition: muiTheme.transitions.create(["border-color", "box-shadow"]),
        "&:hover": {
          backgroundColor: palette.action.hover,
        },
        "&:before": {
          display: "none",
        },
        "&:after": {
          display: "none",
        },
        [`&.Mui-disabled`]: {
          backgroundColor: palette.neutral[50],
        },
        [`&.Mui-focused`]: {
          backgroundColor: "#ffffff",
          borderColor: palette.primary.main,
          boxShadow: `0 0 0 2px ${palette.primary.main}40`,
        },
        [`&.Mui-error`]: {
          borderColor: palette.error.main,
          boxShadow: `0 0 0 2px ${palette.error.main}40`,
        },
      },
      input: {
        fontSize: defaultFontSize,
        fontWeight: 500,
        lineHeight: "24px",
      },
    },
  },
  MuiOutlinedInput: {
    styleOverrides: {
      root: {
        "&:hover": {
          backgroundColor: palette.action.hover,
          [`& .MuiOutlinedInput-notchedOutline`]: {
            borderColor: palette.neutral[300],
          },
        },
        [`&.Mui-focused`]: {
          backgroundColor: "#ffffff",
          [`& .MuiOutlinedInput-notchedOutline`]: {
            borderColor: palette.primary.main,
            boxShadow: `0 0 0 2px ${palette.primary.main}40`,
          },
        },
        [`&.Mui-error`]: {
          [`& .MuiOutlinedInput-notchedOutline`]: {
            borderColor: palette.error.main,
            boxShadow: `0 0 0 2px ${palette.error.main}40`,
          },
        },
        "&:not(.Mui-disabled)": {
          "& .MuiOutlinedInput-notchedOutline": {
            borderColor: palette.neutral[200],
          },
          "&:hover .MuiOutlinedInput-notchedOutline": {
            borderColor: palette.neutral[300],
          },
          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
            borderColor: palette.primary.main,
          },
        },
        "&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
          border: "1px solid",
          borderColor: palette.neutral[200],
        },
      },
      input: {
        fontSize: defaultFontSize,
        fontWeight: 500,
        lineHeight: "24px",
      },
      notchedOutline: {
        borderColor: palette.neutral[200],
        transition: muiTheme.transitions.create(["border-color", "box-shadow"]),
        legend: { width: 0 },
      },
    },
  },
  MuiFormLabel: {
    styleOverrides: {
      root: {
        fontSize: defaultFontSize,
        fontWeight: 500,
        [`&.MuiInputLabel-filled`]: {
          transform: "translate(12px, 18px) scale(1)",
        },
        [`&.MuiInputLabel-shrink`]: {
          [`&.MuiInputLabel-standard`]: {
            transform: "translate(0, -1.5px) scale(0.85)",
          },
          [`&.MuiInputLabel-filled`]: {
            transform: "translate(12px, 6px) scale(0.85)",
          },
          [`&.MuiInputLabel-outlined`]: {
            transform: "translate(14px, -9px) scale(0.85)",
            padding: "0 0.25rem",
            background: palette.primary.contrastText,
          },
        },
        "&.Mui-disabled": {
          color: "rgba(0, 0, 0, 0.6)", // Black label
          transform: "translate(14px, 16px) scale(1)", // Position like placeholder
          "&.Mui-focused": {
            transform: "translate(14px, 16px) scale(1)", // Keep label in place when "focused"
          },
        },
      },
    },
  },
  MuiTab: {
    styleOverrides: {
      root: {
        fontSize: defaultFontSize,
        fontWeight: 500,
        lineHeight: 1.71,
        minWidth: "auto",
        minHeight: 48,
        paddingLeft: 0,
        paddingRight: 0,
        textTransform: "none",
        "& + &": {
          marginLeft: 24,
        },
      },
    },
  },
  MuiTableRow: {
    styleOverrides: {
      root: {
        // '&:nth-of-type(odd)': {
        //   backgroundColor: 'rgba(0, 0, 0, 0.04)', // Example for odd rows
        // },
        '&:nth-of-type(even)': {
          backgroundColor: palette.neutral[50], // Example for even rows
        },
      },
    },
  },
  MuiTableCell: {
    styleOverrides: {
      root: {
        borderBottomColor: palette.divider,
        padding: "10px 6px",
        fontSize: defaultFontSize - 2,
        // padding: "15px 16px",
        // lineHeight: 1.5,
      },
    },
  },
  MuiTableHead: {
    styleOverrides: {
      root: {
        borderBottom: "none",
        [`& .MuiTableCell-root`]: {
          borderBottom: "none",
          backgroundColor: palette.neutral[50],
          color: palette.neutral[700],
          fontSize: defaultFontSize - 2,
          fontWeight: 600,
          lineHeight: 2,
          letterSpacing: 0.5,
          textTransform: "uppercase",
        },
        [`& .MuiTableCell-paddingCheckbox`]: {
          paddingTop: 4,
          paddingBottom: 4,
        },
      },
    },
  },
  // MuiTableFooter: {
  //   styleOverrides: {
  //     root: {
  //       padding: "1px 6px",
  //     },
  //   },
  // },
  MuiTextField: {
    defaultProps: {
      variant: "filled",
    },
  },
  MuiMenu: {
    styleOverrides: {
      list: {
        padding: 0,
      },
      paper: {
        borderRadius: 8,
        border: `1px solid ${palette.divider}`,
        boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
      },
    },
  },
  MuiMenuItem: {
    styleOverrides: {
      root: {
        margin: "0.5rem",
        borderRadius: 8,
      },
    },
  },
  MuiList: {
    styleOverrides: {
      padding: {
        paddingBlock: "1rem",
        paddingInline: "1rem",
        "&.MuiDataGrid-menuList": {
          paddingBlock: "0.25rem",
          paddingInline: "0.25rem",
        },
      },
    },
  },
  MuiListItem: {
    styleOverrides: {
      root: {
        ":hover": {
          backgroundColor: palette.neutral[100],
        },
      },
    },
  },
  MuiListItemButton: {
    styleOverrides: {
      root: {
        borderRadius: 8,
        margin: "4px 8px",
        marginBlockEnd: "4px",
        paddingTop: 10,
        paddingBottom: 10,
        "&.Mui-selected": {
          backgroundColor: palette.primary.light + "40",
          color: palette.primary.dark,
          "&:hover": {
            backgroundColor: palette.primary.light + "60",
          },
          "& .MuiListItemIcon-root": {
            color: palette.primary.main,
          },
        },
      },
    },
  },
  MuiListItemText: {
    styleOverrides: {
      root: {
        marginInlineEnd: "2rem",
      },
      primary: {
        fontWeight: 500,
      },
    },
  },
  MuiListItemIcon: {
    styleOverrides: {
      root: {
        color: "inherit",
      },
    },
  },
  MuiSelect: {
    styleOverrides: {
      select: {
        borderRadius: 8,
      },
    },
  },
};

export default components;
