export const tokensDark = {
    grey: {
        0: "#ffffff",
        10: "#f6f6f6",
        50: "#f0f0f0", 
        100: "#e0e0e0",
        200: "#c2c2c2",
        300: "#a3a3a3",
        400: "#858585",
        500: "#666666",
        600: "#525252",
        700: "#3d3d3d",
        800: "#292929",
        900: "#141414",
        1000: "#000000",
    },
    primary: { //black
      100: "#cecece",
      200: "#9e9e9e",
      300: "#6d6d6d",
      400: "#3d3d3d",
      500: "#0c0c0c",
      600: "#0a0a0a",
      700: "#070707",
      800: "#050505",
      900: "#020202"
    },
    secondary: { //green
      100: "#e1f6f8",
      200: "#c3eef1",
      300: "#a6e5eb",
      400: "#88dde4",
      500: "#6ad4dd",
      600: "#55aab1",
      700: "#407f85",
      800: "#2a5558",
      900: "#152a2c"
    },
};


function reverseTokens(tokensDark) {
    const reversedTokens = {};
    Object.entries(tokensDark).forEach(([key, val]) => {
      const keys = Object.keys(val);
      const values = Object.values(val);
      const length = keys.length;
      const reversedObj = {};
      for (let i = 0; i < length; i++) {
        reversedObj[keys[i]] = values[length - i - 1];
      }
      reversedTokens[key] = reversedObj;
    });
    return reversedTokens;
}
export const tokensLight = reverseTokens(tokensDark);
  
  // mui theme settings
export const themeSettings = (mode) => {
    return {
    palette: {
    mode: mode,
    ...(mode === "dark"
        ? {
            // palette values for dark mode
            primary: {
            ...tokensDark.primary,
            main: tokensDark.primary[400],
            light: tokensDark.primary[400],
            },
            secondary: {
            ...tokensDark.secondary,
            main: tokensDark.secondary[300],
            },
            neutral: {
            ...tokensDark.grey,
            main: tokensDark.grey[500],
            },
            background: {
            default: tokensDark.primary[600],
            alt: tokensDark.primary[500],
            },
        }
        : {
            // palette values for light mode
            primary: {
                ...tokensLight.primary,
                main: tokensDark.grey[50],
                light: tokensDark.grey[100],
            },
            secondary: {
                ...tokensLight.secondary,
                main: tokensDark.secondary[600],
                light: tokensDark.secondary[700],
            },
            neutral: {
                ...tokensLight.grey,
                main: tokensDark.grey[500],
            },
            background: {
                default: tokensDark.grey[0],
                alt: tokensDark.grey[50],
            },
            }),
        },
    typography: {
        fontFamily: ["Lora", "serif"].join(","),
        fontSize: 12,
        h1: {
          fontFamily: ["Lora", "serif"].join(","),
          fontSize: 40,
        },
        h2: {
          fontFamily: ["Lora", "serif"].join(","),
          fontSize: 32,
        },
        h3: {
          fontFamily: ["Lora", "serif"].join(","),
          fontSize: 24,
        },
        h4: {
          fontFamily: ["Lora", "serif"].join(","),
          fontSize: 20,
        },
        h5: {
          fontFamily: ["Lora", "serif"].join(","),
          fontSize: 16,
        },
        h6: {
          fontFamily: ["Lora", "serif"].join(","),
          fontSize: 14,
        },
      },
    };
};
