import { makeStyles } from "@mui/styles";
import { createTheme } from "@mui/material/styles";

export const useTheme = (objProvidedStyle: any) => {
  const myTheme: any =
    objProvidedStyle?.theme ||
    createTheme({
      palette: {
        primary: {
          main: "#eef2f6",
        },
        secondary: {
          main: "#ffffff",
        },
        text: {
          primary: "#000000",
          button: "#ffffff",
          input: "#000000",
          iconButton: "#3949ab",
          disabled: "#AFAFAF"
        },
        background: {
          paper: "#ffffff",
          button: "#3949ab",
          input: "#ffffff",
          default: "#eef2f6",
          iconButton: "#ede7f6",
        },
        action: {
          active: "#364152",
          hover: "#364152",
          selected: "",
          focus: "#3949ab",
          focusBackground: "#e8f0fe",
          filledInputLabelColor: "#364152",
          iconButtonHoverColor: "#ffffff",
          buttonHover: "#152585",
        },
        shape: {
          borderRadius: "20px",
          paddingInput: "14px",
        },
        typography: {
          fontFamily: "Poppins",
          fontSize: "14px",
          autoCompleteFontSize: "12px",
          labelFontSize: "14px",
          FontWeightlight: 300,
          fontWeightRegular: 400,
          fontWeightMedium: 500,
          fontWeightBold: 700,
        },
        disabled: {
          main: '#0bcfccff',              
          background: '#f6f6f6ff',        
          border: '#0000003B',          
          text: '#a4a2a2',  
        }
      },
      table: {
        header: {
          alignment: "center"
        },
        columns: {
          alignment: {
            integer: "right",
            string: "left",
            amount: "right",
            date: "right",
            dateTime: "right"
          }
        }
      },
    } as any);
  const InputFieldStyle = objProvidedStyle?.InputFieldStyle || {
    "& input": {
      paddingTop: 1,
      paddingBottom: 1,
    },
    "& input:not([value=''])": {
      "& ~ .MuiOutlinedInput-notchedOutline": {
          borderColor: myTheme.palette.primary.main,
          borderWidth: "1.5px",
      },
    },
    "&.MuiAutocomplete-root .MuiFormLabel-root:not(.MuiInputLabel-shrink)": {
      top: "50%",
      fontSize: myTheme.typography.fontSize,
       maxWidth: 'calc(100% - 50px)'
    },
    "& .MuiFormLabel-root:not(.MuiInputLabel-shrink)": {
      top: "50%",
      transform: "translate(14px, -90%) scale(1)",
      fontSize: myTheme.typography.fontSize
    },
    "& .MuiFormLabel-root.MuiInputLabel-shrink": {
      transform: "translate(14px, -9px) scale(0.75)"
    },
    "& .MuiInputBase-root": {
      borderRadius: `${myTheme.shape.borderRadius * 1.5}px !important`,
      "& .MuiAutocomplete-input": {
        padding: `${myTheme.spacing(1)} ${myTheme.spacing(
          0.5
        )} ${myTheme.spacing(1)} ${myTheme.spacing(1.875)}`,
      },
      "& .MuiInputBase-inputAdornedEnd": {
        padding: `${myTheme.spacing(1)} ${myTheme.spacing(
          0.5
        )} ${myTheme.spacing(1)} ${myTheme.spacing(1.875)}`,
      },
      paddingTop: 0,
      height:{xs:"32px",md:"42px"},
      paddingBottom: 0,
      paddingLeft: 0,
      transition: myTheme.transitions.create([
        "border-color",
        "background-color",
        "box-shadow",
      ]),
      "&:hover": {
        "& .MuiOutlinedInput-notchedOutline": {
          borderColor: myTheme.palette.primary.main,
          borderWidth: "1.5px",
        },
      },
      "&.Mui-focused": {
        "& .MuiOutlinedInput-notchedOutline": {
          borderColor: myTheme.palette.primary.main,
          borderWidth: "1.5px",
        },
      },
    },

    "& .MuiOutlinedInput-notchedOutline": {
      borderColor: myTheme.palette.text.disabled,
      borderWidth: "1.5px",
      "& legend span": {
        paddingRight: `${myTheme.spacing(1.25)}px`,
      },
    },
    "& label + .MuiInputBase-root": {
      marginTop: 0
    },
    
    "&.MuiAutocomplete-root": {
      "& .MuiAutocomplete-tag": {
        maxWidth: "calc(100% - 40px)",
      },
      "& .MuiAutocomplete-inputRoot": {
        "& .MuiBox-root ~ .MuiAutocomplete-input": {
          padding: 0,
          height: 0,
        }
      }
    },
    "& .MuiFormHelperText-root": {
      fontSize: "10px",
      marginTop: myTheme.spacing(0),
    },
    "& button": {
      color: myTheme.palette.secondary.contrastText,
    },
  };
  return {
    myTheme: myTheme,

    RadioStyle: objProvidedStyle?.RadioStyle || {
      borderRadius: `${myTheme.shape.borderRadius * 1.5}px !important`,
      // padding: `1.5px 10px`,
       padding:`1.7px 10px`,
      background: myTheme.palette.background.default,
      color: myTheme.palette.primary.main,
      fontFamily: "inherit",
      justifyContent: "space-between",
      display: "flex",
      "& .MuiFormLabel-root": {
        flexGrow: 1,
        color: myTheme.palette.text.primary,
      },
      "& .MuiFormLabel-root.Mui-focused": {
        color: myTheme.palette.text.primary,
      },
      "& .MuiFormGroup-root": {
        flexGrow: 0,
        padding: myTheme.spacing(0),
      },
      "& .MuiTypography-body1": {
        fontSize: "14px",
        padding: myTheme.spacing(0.5),
        color: myTheme.palette.text.primary,
      },
      "&:hover": {
        borderColor: myTheme.palette.primary.main,
      },
    },
    InputLabelStyle: objProvidedStyle?.InputLabelStyle || {
      color: myTheme.palette.text.primary,
      fontSize: myTheme.palette.typography.labelFontSize,
    },
    AutoCompleteStyle: objProvidedStyle?.AutoCompleteStyle || {
      "& .MuiAutocomplete-option.Mui-focused:not([aria-selected='true'])": {
          color: myTheme.palette.text.primary,
          backgroundColor: `${myTheme.palette.primary.light}30`
      },
      "& .MuiAutocomplete-option[aria-selected=true]": {
        color: myTheme.palette.primary.main,
        backgroundColor: `${myTheme.palette.primary.light}30`
      },
  },
    BoxStyle: objProvidedStyle?.BoxStyle || {
      fontFamily: "inherit",
      width: "100%",
      margin: "auto",
      fontWeight: "500",
      fontSize: "20px",
      background: "inherit",
      color: myTheme.palette.text.primary,
    },
    Buttonstyle: objProvidedStyle?.Buttonstyle || {
      padding: "2px 0px",
      borderRadius: myTheme.shape.borderRadius * 0.125,
      background: myTheme.palette.primary.main,
      boxShadow: "none",
      textTransform: "none",
      "&:hover": {
        background: myTheme.palette.primary.dark,
        boxShadow: "none",
      },
    },
    IconStyle: objProvidedStyle?.IconStyle || {
      padding: 0.5,
      fill: myTheme.palette.primary.main,
      color: myTheme.palette.primary.main,
      "&:hover": {
        fill: myTheme.palette.primary.dark,
        color: myTheme.palette.primary.dark,
      },
    },
    WrapperStyle: objProvidedStyle?.WrapperStyle || {
      height: "auto",
      width: "100%",
      marginBottom: "-8px",
      color: myTheme.palette.text.primary,
      background: myTheme.palette.background.default,
      overflow: "visible",
    },
    TabStyle: objProvidedStyle?.TabStyle || {
      fontWeight: 500,
      fontFamily: "inherit",
      fontSize: myTheme.typography.fontSize,
      color: myTheme.palette.text.primary,
      background: myTheme.palette.background.default,
      paddingBottom: "0px",
      paddingTop: "8px",
      paddingLeft: "5px",
      paddingRight: "5px",
      "&:hover": {
        color: myTheme.palette.primary.main,
      },
      "&.Mui-selected": {
        color: myTheme.palette.primary.main,
      },
    },
    TabsStyle: objProvidedStyle?.TabsStyle || {
      paddingLeft: 0,
      marginLeft: `${myTheme.spacing(-1.25)}px`,
      background: `${myTheme.palette.background.default}`,
      paddingBottom: "4px",
      marginBottom: "3px",
      borderTop: `1px solid ${myTheme.palette.common.black}29`,
      boxShadow: "0px 3px 4px #afafaf80",
      "& .MuiTabs-indicator": {
        bottom: "6px",
      }
    },
    TabContainerStyle: objProvidedStyle?.TabContainerStyle || {
      background: myTheme.palette.background.default,
      borderRadius: myTheme.shape.borderRadius * 5,
      width: "100%",
      marginRight: "auto",
      marginLeft: "auto",
    },
    DataGridStyle: objProvidedStyle?.DataGridStyle || {
      borderRadius: myTheme.palette.shape.borderRadius,
      background: myTheme.palette.secondary.main,
    },
    pageStyle: objProvidedStyle?.pageStyle || {
      boxSizing: "border-box",
      background: myTheme.palette.background.default,
      minHeight: "inherit",
      margin: myTheme.spacing(0),
      padding: myTheme.spacing(0),
      overflow: "visible",
      fontFamily: myTheme.typography.fontFamily,
    },
    BoxDividerStyle: objProvidedStyle?.BoxDividerStyle || {
      width: "100%",
      paddingTop: "20px",
    },
    CheckBoxStyle: objProvidedStyle?.CheckBoxStyle || {
      "&:hover": {
        backgroundColor: "transparent",
        "& .MuiSvgIcon-root": {
          backgroundColor: myTheme.palette.secondary.dark,
          border: `1px solid ${myTheme.palette.primary.main}`,
        },
      },
      "&.Mui-checked": {
        color: myTheme.palette.primary.main,
        backgroundColor: 'transparent',
        "& svg": {
          border: `1px solid ${myTheme.palette.grey[600]}`,
          fill: myTheme.palette.primary.main,
          backgroundColor: myTheme.palette.common.white,
          borderRadius: myTheme.shape.borderRadius * 0.2,
          width: "24px",
          height: "24px"
        }
      },
      "& .MuiSvgIcon-root": {
        backgroundColor: myTheme.palette.common.white,
        borderRadius: myTheme.shape.borderRadius * 0.2,
        border: `1px solid ${myTheme.palette.grey[600]}`,
      },
      "& svg": {
        padding: "2px",
      },
      "& svg path[d*='M19']": {  
        display: "none",
      }

    },
    OTPInputStyle: objProvidedStyle?.OTPInputStyle || {
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      gap: 1,
      width: "100%",
    },
    OTPInputBoxStyle: objProvidedStyle?.OTPInputBoxStyle || {
      width: "50px",
      fontSize: myTheme.typography.fontSize * 2,
      fontWeight: "bold",
      padding: myTheme.spacing(1),
      borderRadius: myTheme.shape.borderRadius * 2,
      textAlign: "center",
      color: myTheme.palette.text.primary,
      background: myTheme.palette.secondary.main,
      border: `1.5px solid transparent`,
      "&:not([value=''])": {
        border: `1.5px solid ${myTheme.palette.primary.main}`,
      },
      "&:hover": {
        backgroundColor: myTheme.palette.secondary.dark,
        border: `1.5px solid ${myTheme.palette.primary.main}`,
      },

      "&:focus": {
        border: `1.5px solid ${myTheme.palette.primary.main}`,
      },

      "&:focus-visible": {
        outline: "none",
        border: `1.5px solid ${myTheme.palette.primary.main}`,
      },
    },
    InputFieldStyle: objProvidedStyle?.InputFieldStyle || InputFieldStyle,
    useStyles: makeStyles({
      dateStyle: InputFieldStyle,
    }),
    InputTextStyle: objProvidedStyle?.InputTextStyle || {
      fontSize: myTheme.typography.fontSize
    },
    FileInputStyle: objProvidedStyle?.FileInputStyle || {
      border: `1.5px solid ${myTheme.palette.text.disabled}`,
      borderRadius: myTheme.shape.borderRadius * 0.3,
         padding: { xs: '4px 4px 3.5px 8px', md: '6px 4px 7px 8px' },
      "& input": {
        paddingTop: 0,
        paddingBottom: 0,
      },
      "& button": {
        color: myTheme.palette.secondary.contrastText,
      },
    },
    DateStyleLocal: objProvidedStyle?.DateStyleLocal || {
      "&.MuiFormControl-root .MuiInputBase-root": {
        borderRadius: 5 / myTheme.shape.borderRadius,
        "& input": {
          padding: "8px 4px 8px 15px",
          fontSize: myTheme.typography.fontSize,
        }
      },
      "& .MuiFormLabel-root:not(.MuiInputLabel-shrink)": {
        transform: "translate(14px, -50%) scale(1) !important",
        maxWidth: 'calc(100% - 50px)'
      },
    },
    table:objProvidedStyle?.table|| {
      header: {
        alignment: "center"
      },
      columns: {
        alignment: {
          integer: "right",
          string: "left",
          amount: "right",
          date: "right",
          dateTime: "right"
        }
      }
    },
  };
};