import * as components from './components';

const intrinsicComponentMap: Record<string, (props: any) => any> = {
  actionRow: components.ActionRow,
  button: components.Button,
  container: components.Container,
  file: components.File,
  gallery: components.Gallery,
  label: components.Label,
  media: components.Media,
  mentionableSelect: components.MentionableSelect,
  modal: components.Modal,
  option: components.Option,
  premiumButton: components.PremiumButton,
  roleSelect: components.RoleSelect,
  section: components.Section,
  separator: components.Separator,
  stringSelect: components.StringSelect,
  text: components.Text,
  textInput: components.TextInput,
  thumbnail: components.Thumbnail,
  urlButton: components.URLButton,
  userSelect: components.UserSelect,
};

export const Fragment = (props: { children: any }) => {
  return [...props.children];
};

export function jsx(type: any, props: Record<string, any>) {
  if (typeof type === 'function') {
    return type(props);
  }

  if (typeof type === 'string' && intrinsicComponentMap[type]) {
    return intrinsicComponentMap[type](props);
  }

  return {
    type,
    props,
  };
}

export function jsxDEV(
  type: any,
  props: Record<string, any>,
  key: string | number | symbol,
  isStaticChildren: boolean,
  source: any,
  self: any,
) {
  // console.log('JSX DEV', type, props);
  if (typeof type === 'function') {
    return type(props);
  }

  if (typeof type === 'string' && intrinsicComponentMap[type]) {
    return intrinsicComponentMap[type](props);
  }

  return {
    type,
    props: { ...props, key },
    _source: source,
    _self: self,
  };
}