'use client';
import { renderSafeHtml } from "@/src/utils/sanitizeHTML";
import { useRef } from "react";

type Props = {
  htmlContent: string;
};

export const CKeditorContent = ({ htmlContent }: Props) => {
  const contentRef = useRef<HTMLDivElement>(null);

  // const applyCustomPaddingLogic = () => {
  //   if (!contentRef.current) return;

  //   const allElements = contentRef.current.children;

  //   for (let i = 0; i < allElements.length; i++) {
  //     const el = allElements[i] as HTMLElement;

  //     if (el.tagName.toLowerCase() === "h2") {
  //       el.classList.add('pdl-40');

  //       let next = el.nextElementSibling as HTMLElement | null;
  //       while (next && !/^H[1-6]$/i.test(next.tagName)) {
  //         if (next.tagName === "P") {
  //           next.classList.add('pdl-40');
  //         } else if (next.tagName === "UL" || next.tagName === "OL") {
  //           next.classList.add('pdl-list-60');
  //         }
  //         next = next.nextElementSibling as HTMLElement | null;
  //       }
  //     }

  //     if (el.tagName.toLowerCase() === "h3") {
  //       el.classList.add('pdl-80');

  //       let next = el.nextElementSibling as HTMLElement | null;
  //       while (next && !/^H[1-6]$/i.test(next.tagName)) {
  //         if (next.tagName === "P") {
  //           next.classList.add('pdl-80');
  //         } else if (next.tagName === "UL" || next.tagName === "OL") {
  //           next.classList.add('pdl-list-100');
  //         }
  //         next = next.nextElementSibling as HTMLElement | null;
  //       }
  //     }

  //     if (el.tagName.toLowerCase() === "h4") {
  //       el.classList.add('pdl-120');

  //       let next = el.nextElementSibling as HTMLElement | null;
  //       while (next && !/^H[1-6]$/i.test(next.tagName)) {
  //         if (next.tagName === "P") {
  //           next.classList.add('pdl-120');
  //         } else if (next.tagName === "UL" || next.tagName === "OL") {
  //           next.classList.add('pdl-list-140');
  //         }
  //         next = next.nextElementSibling as HTMLElement | null;
  //       }
  //     }

  //     if (el.tagName.toLowerCase() === "h5") {
  //       el.classList.add('pdl-160');

  //       let next = el.nextElementSibling as HTMLElement | null;
  //       while (next && !/^H[1-6]$/i.test(next.tagName)) {
  //         if (next.tagName === "P") {
  //           next.classList.add('pdl-160');
  //         } else if (next.tagName === "UL" || next.tagName === "OL") {
  //           next.classList.add('pdl-list-180');
  //         }
  //         next = next.nextElementSibling as HTMLElement | null;
  //       }
  //     }

  //     if (el.tagName.toLowerCase() === "h6") {
  //       el.classList.add('pdl-200');

  //       let next = el.nextElementSibling as HTMLElement | null;
  //       while (next && !/^H[1-6]$/i.test(next.tagName)) {
  //         if (next.tagName === "P") {
  //           next.classList.add('pdl-200');
  //         } else if (next.tagName === "UL" || next.tagName === "OL") {
  //           next.classList.add('pdl-list-220');
  //         }
  //         next = next.nextElementSibling as HTMLElement | null;
  //       }
  //     }
  //   }
  // };

  // useEffect(() => {
  //   applyCustomPaddingLogic();

  //   const observer = new MutationObserver(() => {
  //     applyCustomPaddingLogic();
  //   });

  //   if (contentRef.current) {
  //     observer.observe(contentRef.current, { childList: true, subtree: true });
  //   }

  //   return () => observer.disconnect();
  // }, [htmlContent]);

  return (
    <div
      className="ckeditor-content-indent"
      ref={contentRef}
    >
        {renderSafeHtml(htmlContent)}
        </div>
  );
};