import { createTheme, makeStyles } from "@mui/material";
import { aborted } from "util";
import { styled } from "@mui/system";
import {
  Unstable_NumberInput as BaseNumberInput,
  NumberInputProps,
  numberInputClasses,
} from "@mui/base/Unstable_NumberInput";
import { AlignHorizontalCenter } from "@mui/icons-material";

//  -    -   -   -   -   -   WORK IN PROGRESS    -  -   -   -   -   -    //
export const chartColor = [
  "#CB4047",
  "#ED3A41",
  "#F47B50",
  "#FBA647",
  "#FDB64C",
  "#CCBB32",
  "#9ACC59",
  "#57B962",
  "#1E83C5",
  "#7C4A9D",
];

export const chartSingleColor = [
  "#f2969a",
  "#fc9599",
  "#faa789",
  "#f7ae94",
  "#ffd491",
  "#ede5a1",
  "#d1f5a2",
  "#9de0a4",
  "#a2d4f5",
  "#b685d6",
];

export const rankColor = [
  "#FFD700",
  "#C0C0C0",
  "#CD853F",
  "#57B962",
  "#57B962",
  "#57B962",
  "#57B962",
  "#57B962",
  "#57B962",
  "#57B962",
];

export const piechartColor1 = [
  "#E84A3E",
  "#F2883C",
  "#FDCD4D",
  "#CE478A",
  "#B63D2A",
  "#6A8B9E",
  "#60667E",
  "#58865F",
  "#2F763E",
  "#7D80B5",
];

export const piechartColor2 = [
  "#6A8B9E",
  "#60667E",
  "#58865F",
  "#2F763E",
  "#7D80B5",
  "#E84A3E",
  "#F2883C",
  "#FDCD4D",
  "#CE478A",
  "#B63D2A",
];

export const cardBorderColor = ["#efb142", "#4bb641", "#448df2", "#e03c04"];

export const chartLineColor = ["#FFFFFF", "#D9D9D9"];

export const GENERAL_RED_COLOR = "#e03c04";

export const TABLE_HEADER_TEXT_COLOR = "#3367D1";

export const GENERAL_INFO_COLOR = "#448df2";

export const GENERAL_SETTING_COLOR = "#666666";

export const GENERAL_BORDER_COLOR = "#e6ebf1";

export const GENERAL_TEXT_COLOR = "#262626";

export const FONT_SIZE_L = "1.875rem";

export const FONT_SIZE_M = "1.5rem";

export const FONT_SIZE_S = "1.25rem";

export const PROJECT_CARD_STYLE = {
  borderRadius: "10px",
  //border: '10px dotted #ccc',
  width: "20rem",
  margin: "20px",
  //backgroundColor:"pink"
};

export const PROJECT_MODAL_STYLE = {
  position: "absolute",
  width: "85%",
  borderRadius: "10px",
  height: "75%",
  // top: '50%',
  // left: '50%',
  transform: "translate(10%, 15%)",
  backgroundColor: "white",
  padding: "20px",
  display: "flex",
  flexDirection: "column",
};

export const DATAGRID_STYLE = {
  boxShadow: 2,
  border: 2,
  borderColor: "primary.light",
  "& .MuiDataGrid-cell:hover": {
    color: "primary.main",
  },
  "& .MuiDataGrid-root": {
    overflow: "auto",
  },
};

export const TAB_THEME = {
  components: {
    MuiTab: {
      styleOverrides: {
        root: {
          // fontSize: '1.0rem',
          fontSize: "1.25rem", //'20px',
          // height: '40px',
          // width: '40vw', // Default width for xs screen sizes
          // '@media (min-width: 600px)': { // sm breakpoint
          //     width: '20vw',
          // },
          // '@media (min-width: 960px)': { // md breakpoint
          //     width: '15vw',
          // },
          // '@media (min-width: 1280px)': { // lg breakpoint
          //     width: '7vw',
          // },
          // textTransform: "none",
          // alignItems: 'center'
        },
      },
    },
  },
};

// copy from MTMS
export const PW_RULE_THEME = createTheme({
  components: {
    MuiFormHelperText: {
      styleOverrides: {
        root: {
          color: "green", 
          fontFamily: "Roboto", 
          '& .icon': {
            alignItems: "center",
            AlignHorizontalCenter: "center",
            marginRight: '4px',
            fontSize: '1rem', // Adjust the font size as needed
          },
        },
      },
    },
  },
});

export const TSMS_BUTTON_THEME = createTheme({
  palette: {
    primary: {
      main: "#92C1E9",
      contrastText: "#FFFFFF",
    },
    secondary: {
      main: "#898D8D",
      contrastText: "#FFFFFF",
    },
    success: {
      main: "#ADCAB8",
      contrastText: "#FFFFFF",
    },
    danger: {
      main: "#F890A5",
      contrastText: "#FFFFFF",
    },
    warning: {
      main: "#EFBE7D",
      contrastText: "#FFFFFF",
    },
    disable: {
      main: "#B2B4B2",
      contrastText: "#FFFFFF",
    },
    create: {
      // main: '#57B962',
      main: "#ADCAB8",
      // light: will be calculated from palette.primary.main,
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
      contrastText: "#FFFFFF",
    },
    delete: {
      // main: '#E03C04',
      main: "#F890A5",
      contrastText: "#FFFFFF",
    },
    cancel: {
      // main: '#999999',
      main: "#F890A5",
      contrastText: "#FFFFFF",
    },
    back: {
      // main: '#999999',
      main: "#898D8D",
      contrastText: "#FFFFFF",
    },
    reset: {
      main: "#EFBE7D",
      contrastText: "#FFFFFF",
    },
    save: {
      // main: '#448DF2',
      main: "#92C1E9",
      contrastText: "#FFFFFF",
    },
    export: {
      main: "#8C52FF",
      contrastText: "#FFFFFF",
    },
    import: {
      main: "#92C1E9",
      contrastText: "#FFFFFF",
    },
    saveAs: {
      main: "#FFBD59",
      contrastText: "#FFFFFF",
    },
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          "& .MuiButtonBase-root-MuiButton-root": {
            fontSize: FONT_SIZE_S,
          },
        },
      },
    },
    MuiButtonBase: {
      styleOverrides: {
        root: {
          "&.MuiChip-root.Mui-disabled": {
            opacity: 0.75,
          },
          "&.MuiButton-root": {
            fontSize: FONT_SIZE_S,
          },
        },
      },
    },
  },
});

export const formTheme = createTheme({
  components: {
    MuiFormLabel: {
      root: {
        // Name of the rule
        color: "rgba(0, 0, 0, 1)",
      },
      styleOverrides: {
        asterisk: {
          color: "#db3131",
          "&$error": {
            color: "#db3131",
          },
        },
      },
    },
  },
});

export const ARS_BUTTON_THEME = createTheme({
  palette: {
    create: {
      main: "#57B962",
      // light: will be calculated from palette.primary.main,
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
      contrastText: "#FFFFFF",
    },
    delete: {
      main: "#E03C04",
      contrastText: "#FFFFFF",
    },
    cancel: {
      main: "#999999",
      contrastText: "#FFFFFF",
    },
    save: {
      main: "#448DF2",
      contrastText: "#FFFFFF",
    },
    export: {
      main: "#8C52FF",
      contrastText: "#FFFFFF",
    },
    saveAs: {
      main: "#FFBD59",
      contrastText: "#FFFFFF",
    },
    edit: {
      main: "#F3AF2B",
      contrastText: "#FFFFFF",
    },
    exportExcel: {
      main: "#6A8B9E",
      contrastText: "#FFFFFF",
    },
  },
  components: {
    MuiDataGrid: {
      styleOverrides: {
        actionsCell: {
          "& .MuiDataGrid-actionsContainer .MuiIconButton-root": {
            fontSize: "80px", // Set the desired icon size here
          },
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          // fontSize: '1.0rem',
          fontSize: "1.25rem",
          height: "40px",
          width: "40vw", // Default width for xs screen sizes
          "@media (min-width: 600px)": {
            // sm breakpoint
            width: "20vw",
          },
          "@media (min-width: 960px)": {
            // md breakpoint
            width: "15vw",
          },
          "@media (min-width: 1280px)": {
            // lg breakpoint
            width: "7vw",
          },
          textTransform: "none",
          alignItems: "center",
        },
      },
    },
  },
});

//from ARS
export const TSMS_LONG_BUTTON_THEME = createTheme({
  palette: {
    create: {
      main: "#57B962",
      // light: will be calculated from palette.primary.main,
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
      contrastText: "#FFFFFF",
    },
    delete: {
      main: "#E03C04",
      contrastText: "#FFFFFF",
    },
    cancel: {
      main: "#999999",
      contrastText: "#FFFFFF",
    },
    save: {
      main: "#448DF2",
      contrastText: "#FFFFFF",
    },
    export: {
      main: "#8C52FF",
      contrastText: "#FFFFFF",
    },
    saveAs: {
      main: "#FFBD59",
      contrastText: "#FFFFFF",
    },
    edit: {
      main: "#F3AF2B",
      contrastText: "#FFFFFF",
    },
    exportExcel: {
      main: "#60667E",
      contrastText: "#FFFFFF",
    },
  },
  components: {
    MuiDataGrid: {
      styleOverrides: {
        actionsCell: {
          "& .MuiDataGrid-actionsContainer .MuiIconButton-root": {
            fontSize: "80px", // Set the desired icon size here
          },
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          fontSize: "1.25rem",
          height: "40px",
          width: "40vw", // Default width for xs screen sizes
          "@media (min-width: 600px)": {
            // sm breakpoint
            width: "30vw",
          },
          "@media (min-width: 960px)": {
            // md breakpoint
            width: "25vw",
          },
          "@media (min-width: 1280px)": {
            // lg breakpoint
            width: "14vw",
          },
          textTransform: "none",
          alignItems: "center",
        },
      },
    },
  },
});

export default function NumberInputBasic() {
  const [value, setValue] = (React.useState < number) | (null > null);
  return (
    <NumberInput
      aria-label="Demo number input"
      placeholder="Type a number…"
      value={value}
      onChange={(event, val) => setValue(val)}
    />
  );
}
const blue = {
  100: "#DAECFF",
  200: "#80BFFF",
  400: "#3399FF",
  500: "#007FFF",
  600: "#0072E5",
};

const grey = {
  50: "#F3F6F9",
  100: "#E5EAF2",
  200: "#DAE2ED",
  300: "#C7D0DD",
  400: "#B0B8C4",
  500: "#9DA8B7",
  600: "#6B7A90",
  700: "#434D5B",
  800: "#303740",
  900: "#1C2025",
};
export const StyledInputRoot = styled("div")(
  ({ theme }) => `
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  border-radius: 8px;
  color: ${theme.palette.mode === "dark" ? grey[300] : grey[900]};
  background: ${theme.palette.mode === "dark" ? grey[900] : "#fff"};
  border: 1px solid ${theme.palette.mode === "dark" ? grey[700] : grey[200]};
  box-shadow: 0px 2px 2px ${
    theme.palette.mode === "dark" ? grey[900] : grey[50]
  };
  display: grid;
  grid-template-columns: 1fr 19px;
  grid-template-rows: 1fr 1fr;
  overflow: hidden;
  column-gap: 8px;
  padding: 4px;

  &.${numberInputClasses.focused} {
    border-color: ${blue[400]};
    box-shadow: 0 0 0 3px ${
      theme.palette.mode === "dark" ? blue[600] : blue[200]
    };
  }

  &:hover {
    border-color: ${blue[400]};
  }

  // firefox
  &:focus-visible {
    outline: 0;
  }
`
);

export const StyledInputElement = styled("input")(
  ({ theme }) => `
  font-size: 0.875rem;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.5;
  grid-column: 1/2;
  grid-row: 1/3;
  color: ${theme.palette.mode === "dark" ? grey[300] : grey[900]};
  background: inherit;
  border: none;
  border-radius: inherit;
  padding: 8px 12px;
  outline: 0;
`
);

export const StyledButton = styled("button")(
  ({ theme }) => `
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  appearance: none;
  padding: 0;
  width: 19px;
  height: 19px;
  font-family: system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1;
  box-sizing: border-box;
  background: ${theme.palette.mode === "dark" ? grey[900] : "#fff"};
  border: 0;
  color: ${theme.palette.mode === "dark" ? grey[300] : grey[900]};
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;

  &:hover {
    background: ${theme.palette.mode === "dark" ? grey[800] : grey[50]};
    border-color: ${theme.palette.mode === "dark" ? grey[600] : grey[300]};
    cursor: pointer;
  }

  &.${numberInputClasses.incrementButton} {
    grid-column: 2/3;
    grid-row: 1/2;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border: 1px solid;
    border-bottom: 0;
    &:hover {
      cursor: pointer;
      background: ${blue[400]};
      color: ${grey[50]};
    }

  border-color: ${theme.palette.mode === "dark" ? grey[800] : grey[200]};
  background: ${theme.palette.mode === "dark" ? grey[900] : grey[50]};
  color: ${theme.palette.mode === "dark" ? grey[200] : grey[900]};
  }

  &.${numberInputClasses.decrementButton} {
    grid-column: 2/3;
    grid-row: 2/3;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid;
    &:hover {
      cursor: pointer;
      background: ${blue[400]};
      color: ${grey[50]};
    }

  border-color: ${theme.palette.mode === "dark" ? grey[800] : grey[200]};
  background: ${theme.palette.mode === "dark" ? grey[900] : grey[50]};
  color: ${theme.palette.mode === "dark" ? grey[200] : grey[900]};
  }
  & .arrow {
    transform: translateY(-1px);
  }
`
);