const palette = {
  "black": "#000000",
  "blackNormal": "#303030",
  "white": "#FFFFFF",
  "whiteNormal": "#F0F0F0",
  "orangeNormal": "#FDA700",
  "orangeNormalHover": "#FD6A00",
  "orangeLight": "#FFBD13",
  "orangeLightHover": "#FFCB13",
  "orangeDark": "#F06500",
  "greyNormal": "#C4C4C4",
  "greyLight": "#FAFAFA",
  "greyExtraLight": "#BABABA",
  "greyNormalLight": "#A5A5A5",
  "greyDark": "#5E5E5E",
  "blueNormal": "#15A0E9",
  "blueDark": "#0D3E89",
  "focusVisible": "#749FDF",
  "redNormalHover": "#B40101",
}

const colorTokens = {
  "list-default-color": palette.blackNormal,
  "text-default-color": palette.black,
  "text-disable-color": palette.greyNormal,
  "control-default-color": palette.white,
  "control-default-border-color": palette.greyExtraLight,
  "control-primary-color": palette.orangeNormal,
  "control-primary-border-color": palette.orangeDark,
  "control-disable-color": palette.whiteNormal,
  "link-default-color-2022": palette.blueNormal,
  "link-hover-color-2022": palette.orangeNormalHover,
  "link-active-color-2022": palette.orangeNormalHover,
  "link-visited-color-2022": palette.blueNormal,
  "link-default-color-2020": palette.blueDark,
  "link-hover-color-2020": palette.redNormalHover,
  "link-active-color-2020": palette.redNormalHover,
  "link-visited-color-2020": palette.blueDark,
  "input-default-color-border": palette.greyNormal,
  "input-hover-color-border": palette.greyNormal,
  "input-active-color-border": palette.greyNormal,
  "input-focus-color-border": palette.focusVisible,
  "button-default-yellow-color-bg": palette.orangeLight,
  "button-default-yellow-color-bg-hover": palette.orangeLightHover,
  "error-color": palette.redNormalHover,
}

export type colorTokensType = keyof typeof colorTokens
export type FilterUnionByStringIncludes<T, K extends string> = T & K;
export type TextColorTokens = FilterUnionByStringIncludes<colorTokensType, `${string}text${string}`>;
export type LinkColorTokens = FilterUnionByStringIncludes<colorTokensType, `${string}link${string}`>;
export type InputColorTokens = FilterUnionByStringIncludes<colorTokensType, `${string}input${string}`>;
export type ButtonColorTokens = FilterUnionByStringIncludes<colorTokensType, `${string}button${string}`>;
export type ControlColorTokens = FilterUnionByStringIncludes<colorTokensType, `${string}control${string}`>;
export type ListColorTokens = FilterUnionByStringIncludes<colorTokensType, `${string}list${string}`>;

function getTokents<T extends string, U extends string = string>(includeStr: string) {
  return Object.keys(colorTokens).filter((key) => (key).includes(includeStr)).reduce((acc, value) => {
    return Object.assign(acc, { [value]: colorTokens[value as colorTokensType] })
  }, {}) as Record<T, U>
}

const textColorTokens = getTokents<TextColorTokens>('text')
const linkColorTokens = getTokents<LinkColorTokens>('link')
const listColorTokens = getTokents<ListColorTokens>('list')
const inputColorTokens = getTokents<InputColorTokens>('input')
const controlColorTokens = getTokents<ControlColorTokens>('control')

export { palette, colorTokens, textColorTokens, linkColorTokens, listColorTokens, inputColorTokens, controlColorTokens }