'use client';

import { NodeViewWrapper, NodeViewProps } from '@tiptap/react';
import { WidgetType } from '@/config/enums/tip-tap';
import InlineImageNode from '../inline-image/inline-image-node';
import BeforeAfterImageNode from '../before-after-image/before-after-image-node';
import QuoteNode from '../quote/quote-node';
import FacteNode from '../fact-node/fact-node';
import MapNode from '../map/map-node';
import TimelineNode from '../timeline/timeline-node';
import ArticleNode from '../article/article-node';
import ModalNode from '../modal/modal-node';
import PollNode from '../poll/poll-node';
import VoteNode from '../vote/vote-node';
import SuggestionNode from '../suggestions/suggestions-node';
import AdsNode from '../ads/ads-node';

export const WidgetNodeView = (props: NodeViewProps) => {
  const { node } = props;
  const { type } = node.attrs;

  switch (type) {
    case WidgetType.IMAGE:
      return (
        <NodeViewWrapper data-drag-handle>
          <InlineImageNode {...props} />
        </NodeViewWrapper>
      );

    case WidgetType.SLIDER:
      return (
        <NodeViewWrapper>
          <BeforeAfterImageNode {...props} />
        </NodeViewWrapper>
      );

    case WidgetType.QUOTE:
      return (
        <NodeViewWrapper data-drag-handle>
          <QuoteNode {...props} />
        </NodeViewWrapper>
      );

    case WidgetType.FACT:
      return (
        <NodeViewWrapper data-drag-handle>
          <FacteNode {...props} />
        </NodeViewWrapper>
      );

    case WidgetType.MAP:
      return (
        <NodeViewWrapper data-drag-handle>
          <MapNode {...props} />
        </NodeViewWrapper>
      );

    case WidgetType.TIMELINE:
      return (
        <NodeViewWrapper data-drag-handle>
          <TimelineNode {...props} />
        </NodeViewWrapper>
      );

    case WidgetType.ARTICLE:
      return (
        <NodeViewWrapper data-drag-handle>
          <ArticleNode {...props} />
        </NodeViewWrapper>
      );

    case WidgetType.MODAL:
      return (
        <NodeViewWrapper data-drag-handle>
          <ModalNode {...props} />
        </NodeViewWrapper>
      );

    case WidgetType.POLL:
      return (
        <NodeViewWrapper data-drag-handle>
          <PollNode {...props} />
        </NodeViewWrapper>
      );

    case WidgetType.VOTE:
      return (
        <NodeViewWrapper data-drag-handle>
          <VoteNode {...props} />
        </NodeViewWrapper>
      );

    case WidgetType.SUGGESTION:
      return (
        <NodeViewWrapper data-drag-handle>
          <SuggestionNode {...props} />
        </NodeViewWrapper>
      );

    case WidgetType.ADS:
      return (
        <NodeViewWrapper data-drag-handle>
          <AdsNode {...props} />
        </NodeViewWrapper>
      );

    default:
      return (
        <NodeViewWrapper data-drag-handle>
          <div>Unknown widget</div>
        </NodeViewWrapper>
      );
  }
};