import { flattenedThemeHex } from '@abds/styles/tailwind.colors.default';

const filterObjectByKey = (obj, regex = /inherit|transparent|current/gim) =>
  Object.fromEntries(Object.entries(obj).filter(([mappedColorName]) => !mappedColorName.match(regex)));

// filter out extras and variants for color presets
const presetColors = Object.entries(
  filterObjectByKey(flattenedThemeHex, /[0-9]|neutral|inherit|transparent|current/gim)
).map(([title, color]) => ({
  color,
  title,
}));

// sort theme by custom array of keys and map to css variable names
const themeKeys = [...presetColors].map((color) => `--colors-${color.title}`);
const theme = Object.fromEntries(
  Object.entries(filterObjectByKey(flattenedThemeHex)).sort(
    ([key1], [key2]) => themeKeys.indexOf(key1) - themeKeys.indexOf(key2)
  )
);

const argTypes = Object.entries(theme).map(([mappedThemeName, mappedThemeValue]) => ({
  control: {
    presetColors,
    type: 'color',
  },
  defaultValue: mappedThemeValue,
  description: `${mappedThemeName} ${mappedThemeValue}`,
  name: `--colors-${mappedThemeName}`,
  type: 'string',
  value: mappedThemeValue,
}));

export { argTypes };
