import { Theme } from '@leafygreen-ui/lib';
import { palette } from '@leafygreen-ui/palette';

export type ShadowKey = 1 | 2 | 3 | 'overflow';

type Value = {
  [key in ShadowKey]: string;
};

export const shadows: Record<Theme, Value> = {
  [Theme.Light]: {
    1: `color-mix(in srgb, ${palette.black} 15%, transparent)`,
    2: `color-mix(in srgb, ${palette.black} 20%, transparent)`,
    3: `color-mix(in srgb, ${palette.black} 60%, transparent)`,
    overflow: `color-mix(in srgb, ${palette.gray.dark1} 30%, transparent)`,
  },
  [Theme.Dark]: {
    1: 'transparent',
    2: `color-mix(in srgb, #000000 45%, transparent)`,
    3: `color-mix(in srgb, #000000 60%, transparent)`,
    overflow: `color-mix(in srgb, #000000 30%, transparent)`,
  },
} as const;

export const boxShadows: Record<Theme, Value> = {
  [Theme.Light]: {
    1: `0px 2px 4px 1px ${shadows[Theme.Light][1]}`,
    2: `0px 18px 18px -15px ${shadows[Theme.Light][2]}`,
    3: `0px 8px 20px -8px ${shadows[Theme.Light][3]}`,
    overflow: `0px 2px 4px 1px ${shadows[Theme.Light]['overflow']}`,
  },
  [Theme.Dark]: {
    1: `unset`,
    2: `0 18px 18px -15px ${shadows[Theme.Dark][2]}`,
    3: `0 8px 20px -8px ${shadows[Theme.Dark][3]}`,
    overflow: `0px 2px 4px 1px ${shadows[Theme.Dark]['overflow']}`,
  },
} as const;