import { Skeleton } from '@mantine/core';
import React from 'react';
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';

export function PreviewComponent({
  step,
  preview,
  loading,
}: {
  step: any;
  preview: any;
  loading: boolean;
}) {
  function PreviewTypeComponent() {
    if (step.type === StepTypeEnum.EMAIL) {
      return <EmailPreviewComponent preview={preview} />;
    }
    if (step.type === StepTypeEnum.SMS) {
      return <SMSPreviewComponent preview={preview} />;
    }
    if (step.type === StepTypeEnum.PUSH) {
      return <SMSPreviewComponent preview={preview} />;
    }
    if (step.type === StepTypeEnum.IN_APP) {
      return <InAppPreviewComponent preview={preview} />;
    }
    if (step.type === 'custom') {
      return <CustomStepPreviewComponent content={preview} />;
    }

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

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