'use client';

import { Skeleton } from '@mantine/core';
import React from 'react';
import betterAjvErrors from 'better-ajv-errors';
import { StepTypeEnum } from '@/src/components/Node/NodeIcon';
import { EmailPreviewComponent } from '@/src/components/PreviewComponent/EmailPreview/EmailPreviewComponent';
import { SMSPreviewComponent } from '@/src/components/PreviewComponent/SmSPreview/SmsPreview';
import { InAppPreviewComponent } from '@/src/components/PreviewComponent/InAppPreview/InAppPreview';
import { CustomStepPreviewComponent } from '@/src/components/PreviewComponent/CustomStepPreview/CustomStepPreview';
import { JSONPreviewComponent } from '@/src/components/PreviewComponent/JsonPreview/JsonPreview';
import { CodeComponent } from '@/src/components/CodeComponent/CodeComponent';

export function PreviewComponent({
  step,
  preview,
  loading,
  error,
}: {
  step: any;
  preview: any;
  loading: boolean;
  error: any;
}) {
  const { outputs, code } = preview || {};

  function PreviewTypeComponent() {
    if (step.type === StepTypeEnum.EMAIL) {
      return <EmailPreviewComponent preview={outputs} />;
    }
    if (step.type === StepTypeEnum.SMS) {
      return <SMSPreviewComponent preview={outputs} />;
    }
    if (step.type === StepTypeEnum.PUSH) {
      return <SMSPreviewComponent preview={outputs} />;
    }
    if (step.type === StepTypeEnum.IN_APP) {
      return <InAppPreviewComponent preview={outputs} />;
    }
    if (step.type === 'custom') {
      return <CustomStepPreviewComponent content={outputs} />;
    }

    return <JSONPreviewComponent content={outputs} />;
  }

  function RenderError() {
    return (
      <div style={{ padding: 20, background: '#990000', borderRadius: 10 }}>
        <h3>Validation Error</h3>
        <div>{preview.message}</div> <br />
        <CodeComponent code={JSON.stringify(preview.data, null, 2)} />
      </div>
    );
  }

  return (
    <div style={{ display: 'flex' }}>
      <div style={{ width: '100%' }}>
        {loading || !step ? (
          <Skeleton visible style={{ marginBottom: 10 }}>
            <div style={{ height: '500px' }} />
          </Skeleton>
        ) : code ? (
          <RenderError />
        ) : (
          <PreviewTypeComponent />
        )}
      </div>
    </div>
  );
}
