import { useState } from 'react';

import { Form } from '~/src/ui/components/form';
import { Layout } from '~/src/ui/layouts/layout';
import { Section } from '~/src/ui/layouts/section';
import { Text } from '~/src/ui/primitives/text';
import { FormBuilderConfig } from './types';

export const FormPreview = ({ config }: { config: FormBuilderConfig }) => {
  const [previewSubmitData, setPreviewSubmitData] = useState<Record<
    string,
    any
  > | null>(null);

  return (
    <Layout column gap="3">
      <Text variant="body-small">Preview</Text>
      <Section>
        <Form
          config={{ ...config, submit: { ...config.submit } }}
          onSubmit={setPreviewSubmitData}
          mode="onBlur"
        />
      </Section>
      <Text variant="body-small">Submitted Data</Text>
      <Section>
        <pre>
          {previewSubmitData
            ? JSON.stringify(previewSubmitData, null, 2)
            : 'No data submitted yet.'}
        </pre>
      </Section>
    </Layout>
  );
};