import validator from '@rjsf/validator-ajv8';
import Form from '@rjsf/chakra-ui';
import { Alert, Card, Checkbox, Input } from '@mantine/core';
import { IconInfoCircle } from '@tabler/icons-react';
import { ThemeProps } from '@rjsf/core';
import { RegistryFieldsType, WidgetProps } from '@rjsf/utils';

export function InputManager({
  schema,
  onSubmit,
  onChange,
}: {
  schema: any;
  onSubmit: any;
  onChange: any;
}) {
  if (!Object.keys(schema?.properties)?.length) {
    return (
      <Alert
        variant="light"
        color="grey"
        title="No step inputs found"
        icon={<IconInfoCircle />}
        radius="md"
      >
        Inputs allow you to modify the content and behaviour of a step. Learn more about it on docs.
      </Alert>
    );
  }

  return (
    <Card shadow="sm">
      <Form schema={schema} validator={validator} onSubmit={onSubmit} onChange={onChange} />
    </Card>
  );
}
