import * as React from 'react';

import { createComponents } from '../common';
import { FormComponentProps } from '@tomino/dynamic-form';
import { Context } from '../context';
import { observer } from 'mobx-react';

export type AuthItemProps = {
  roles: string[];
  disable: boolean;
};

export const AuthItem: React.FC<FormComponentProps<AuthItemProps>> = observer(props => {
  const ctx = React.useContext(Context);
  const { roles } = props.formElement.props;
  if (
    !ctx.auth.user ||
    !ctx.auth.user.id ||
    (roles && roles.length && roles.every(r => !ctx.auth.user.roles.some(u => u === r)))
  ) {
    return null;
  }
  return <>{createComponents(props)}</>;
  // return (
  //   <DynamicComponent {...props} control={React.Fragment}>
  //     {createComponents(props)}
  //   </DynamicComponent>
  // );
});