import { createTheme } from "@mui/material";
import { faIR } from "@mui/material/locale";

export const theme = createTheme(
  {
    direction: "rtl",
    typography: {
      fontFamily: [
        "iranyekan",
        "-apple-system",
        "BlinkMacSystemFont",
        '"Segoe UI"',
        "Roboto",
        '"Helvetica Neue"',
        "sans-serif",
        "Arial",
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
      ].join(","),
    },
    palette: {
      primary: {
        light: "#E0E7FF",
        main: "#244CCC",
        dark: "#102159",
        contrastText: "#fff",
      },
      secondary: {
        light: "#E6FAF5",
        main: "#00CC99",
        dark: "#ab003c",
        contrastText: "#000",
      },
      error: {
        light: "#EB5757",
        main: "#EB5757",
        dark: "#EB5757",
        contrastText: "#fff",
      },
      info: {
        light: "#17A2B8",
        main: "#17A2B8",
        dark: "#17A2B8",
        contrastText: "#fff",
      },
    },
    breakpoints: {
      values: {
        xs: 0,
        sm: 600,
        md: 900,
        lg: 1200,
        nlg: 1400,
        xl: 1536,
        nxl: 1700,
        xxl: 1920,
        xxxl: 2400,
      },
    },
    components: {
      MUIDataTableBodyRow: {
        styleOverrides: {
          root: {
            borderBottom: "1px solid #e3e3e3",
          },
        },
      },
      MuiFormControl: {
        styleOverrides: {
          root: {
            width: "100%",
          },
        },
      },
      MuiFormControlLabel: {
        styleOverrides: {
          label: {
            fontSize: "14px",
          },
        },
      },
      MuiOutlinedInput: {
        styleOverrides: {
          root: {
            backgroundColor: "transparent",
            "&.Mui-focused": {
              backgroundColor: "transparent",
            },
          },
          input: {
            backgroundColor: "transparent",
            "&:-webkit-autofill": {
              WebkitBoxShadow: "0 0 0 100px white inset",
              WebkitTextFillColor: "inherit",
            },
          },
          notchedOutline: {
            borderColor: "#e6e6e6",
          },
        },
      },
      MuiInputLabel: {
        styleOverrides: {
          asterisk: {
            color: "#EB5757",
          },
        },
      },
      MuiButton: {
        styleOverrides: {
          root: ({ theme }) => ({
            borderRadius: "8px",
            fontWeight: 600,
            "&.Mui-disabled": {
              backgroundColor: "rgba(36, 76, 204, 0.3)",
              color: "rgba(255, 255, 255, 0.7)",
            },
            fontSize: "17px",
            [theme.breakpoints.down("sm")]: {
              fontSize: "13px",
            },
          }),
          outlined: {
            borderWidth: "2px",
            "&:hover": {
              borderWidth: "2px",
            },
            "&.Mui-disabled": {
              borderColor: "rgba(36, 76, 204, 0.3)",
              color: "rgba(36, 76, 204, 0.5)",
              backgroundColor: "transparent",
            },
          },
        },
      },
      MUIDataTable: {
        styleOverrides: {
          responsiveBase: {
            overflow: "hidden",
          },
          root: {
            boxShadow: "none !important",
            width: "100%",
          },
        },
      },
      MUIDataTableSearch: {
        styleOverrides: {
          searchIcon: {
            display: "none",
          },
          main: {
            justifyContent: "flex-end",
          },
          searchText: {
            flex: "unset",
          },
        },
      },
      MUIDataTablePagination: {
        styleOverrides: {
          navContainer: {
            width: "100%",
            display: "inline-block",
          },
        },
      },
      MUIDataTableToolbar: {
        styleOverrides: {
          root: {
            alignItems: "center",
          },
          actions: {
            display: "flex",
            justifyContent: "flex-end",
            flex: "unset",
          },
          titleText: {
            textAlign: "right",
            fontSize: "16px",
            color: "rgba(0, 0, 0, 0.54)",
          },
        },
      },
      MUIDataTableHeadCell: {
        styleOverrides: {
          toolButton: {
            padding: "0px !important",
            marginRight: "0px !important",
            justifyContent: "center !important",
          },
          data: ({ theme }) => ({
            fontSize: "14px",
            [theme.breakpoints.down("sm")]: {
              fontSize: "12px",
            },
          }),
          contentWrapper: {
            justifyContent: "center",
          },
        },
      },
      MuiTableCell: {
        styleOverrides: {
          head: {
            backgroundColor: "#e3e3e3 !important",
            textAlign: "center",
          },
          root: {
            justifyContent: "center",
            padding: "5px !important",
          },
        },
      },
      MuiToolbar: {
        styleOverrides: {
          root: {},
        },
      },
      MUIDataTableBodyCell: {
        styleOverrides: {
          root: {
            textAlign: "center",
            fontSize: "12px",
          },
        },
      },
      MuiTablePagination: {
        styleOverrides: {
          root: {
            justifyContent: "center",
            display: "flex",
          },
          toolbar: {
            marginTop: "0px",
            alignItems: "center",
          },
        },
      },
      MuiDrawer: {
        styleOverrides: {
          paperAnchorBottom: {
            borderTopRightRadius: "25px",
            borderTopLeftRadius: "25px",
          },
        },
      },
      MuiTimeline: {
        styleOverrides: {
          root: {
            gap: "0px !important",
          },
        },
      },
    },
  },
  faIR
);
