const depth = {
  1: {
    default: `0 0 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.14)`,
  },
  2: {
    default: `0 3px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.14)`,
    focusRing: `0 3px 8px 0 rgba(0, 0, 0, 0.14), 0 5px 4px 0 rgba(0, 0, 0, 0.12), 0 5px 3px 0 rgba(0, 0, 0, 0.1)`,
  },
  3: {
    default: `0 6px 10px 0 rgba(0, 0, 0, 0.1), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px 0 rgba(0, 0, 0, 0.14)`,
  },
  4: {
    default: `0 12px 17px 2px rgba(0, 0, 0, 0.1), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 7px 8px 0 rgba(0, 0, 0, 0.14)`,
  },
} as const;

type Depth = typeof depth;
type DepthType = 'focusRing' | 'default';
type Level = keyof Depth;
// Determine if focusRing is present on a given Level
type PossibleKeys<T extends Level> = keyof Depth[T] & DepthType;
type PossibleValue<T extends Level> = Depth[T][PossibleKeys<T>];

type ReturnValue<T extends Level, K> = K extends 'focusRing'
  ? Depth[T][Exclude<PossibleKeys<T>, 'default'>]
  : Depth[T]['default'];

export type ValidDepth = PossibleValue<1> | PossibleValue<2> | PossibleValue<3> | PossibleValue<4>;

// Note: this is the same as @lendi-ui/depth but without the 'box-shadow: ' and semi-colon included in the string
function getDepth<T extends Level, K extends PossibleKeys<T>>(level: T, type: K): ReturnValue<T, K>;
function getDepth<T extends Level>(level: T): Depth[T]['default'];
function getDepth(level: Level, type?: DepthType): string {
  const depthType = type ?? 'default';

  return depth?.[level]?.[depthType as PossibleKeys<typeof level>];
}

// const a = getDepth(1);
// const b = getDepth(1, 'focusRing');
// const c = getDepth(2);
// const d = getDepth(2, 'focusRing');

export default getDepth;