import { Color, HSL } from "three";

const offset = {
  pub: {
    h: 0,
    s: 0,
    l: 0,
  },
  hover: {
    h: -0.012,
    s: 0,
    l: 0.07,
  },
  press: {
    h: 0.002,
    s: 0.104,
    l: 0.207,
  },
  disable: {
    h: -0.0189,
    s: 0,
    l: -0.15,
  },
};
type keys = keyof typeof offset;

export const getMouseColors = (color16: string) => {
  const theme = new Color(color16);
  const themeHSL = theme.getHSL({} as HSL);
  const temp = new Color();
  const colors = Object.entries(offset).reduce((t, [k, o]) => {
    t[k as keys] = '#' + temp
      .setHSL(themeHSL.h + o.h, themeHSL.s + o.s, themeHSL.l + o.l)
      .getHexString();
    return t;
  }, {} as Record<keys, string>);

  return {
    theme: '#' + theme.getHexString(),
    ...colors
  };
}
