import validator from '@rjsf/validator-ajv8';
import Form from '@rjsf/chakra-ui';
import { Alert, Card, Checkbox, Group, Text, Tabs, Popover, ActionIcon, Code } from '@mantine/core';
import {
  IconBraces,
  IconInfoCircle,
  IconMessageCircle,
  IconPencilPlus,
  IconPhoto,
} from '@tabler/icons-react';
import { ThemeProps } from '@rjsf/core';
import ReactJson from '@microlink/react-json-view';
import { useState } from 'react';
import { useDisclosure } from '@mantine/hooks';
import classes from './InputManager.module.css';

export function InputManager({
  schema,
  title,
  onSubmit,
  onChange,
  tooltip,
  view = 'form',
  json,
}: {
  title: string;
  schema: any;
  onSubmit: any;
  onChange: any;
  tooltip?: any;
  json?: any;
  view?: 'form' | 'json';
}) {
  function onDataChange(data: any) {
    onChange(data);
  }
  const iconStyle = { width: 14, height: 14 };

  const hasInputs = Object.keys(schema?.properties)?.length;

  return (
    <>
      {view === 'json' ? (
        <div style={{ paddingTop: 20 }}>
          <ReactJson
            name={false}
            collapseStringsAfterLength={25}
            collapsed={2}
            displayObjectSize={false}
            displayDataTypes={false}
            src={json}
            theme="hopscotch"
            onEdit={(data) => {
              onDataChange({ formData: data.updated_src });
            }}
          />
        </div>
      ) : null}

      {view === 'form' ? (
        <>
          {!hasInputs ? (
            <Alert
              mt={20}
              variant="light"
              color="grey"
              title={`No ${title} inputs found`}
              icon={<IconInfoCircle />}
              radius="md"
            >
              {tooltip}
            </Alert>
          ) : null}

          <div className={classes.root}>
            {hasInputs ? (
              <Form
                templates={{ ButtonTemplates: { SubmitButton: () => null } }}
                schema={schema}
                validator={validator}
                onSubmit={onSubmit}
                onChange={onDataChange}
                formData={json}
              />
            ) : null}
          </div>
        </>
      ) : null}
    </>
  );
}
