import { ReactNode, Suspense, useState } from "react";
import Tabs from "../../../../components/ui/tabs/Tabs";
import { PageBlockDto } from "../../dtos/PageBlockDto";
import BannerBlock from "./marketing/banner/BannerBlock";
import CommunityBlock from "./marketing/community/CommunityBlock";
import FaqBlock from "./marketing/faq/FaqBlock";

import { FeaturesBlock } from "./marketing/features/FeaturesBlock";
import { FooterBlock } from "./marketing/footer/FooterBlock";
import GalleryBlock from "./marketing/gallery/GalleryBlock";
import { HeaderBlock } from "./marketing/header/HeaderBlock";
import { HeadingBlock } from "./marketing/heading/HeadingBlock";
import { HeroBlock } from "./marketing/hero/HeroBlock";
import LogoCloudsBlock from "./marketing/logoClouds/LogoCloudsBlock";
import NewsletterBlock from "./marketing/newsletter/NewsletterBlock";
import PricingBlock from "./marketing/pricing/PricingBlock";
import TestimonialsBlock from "./marketing/testimonials/TestimonialsBlock";
import VideoBlock from "./marketing/video/VideoBlock";
import PageBlockBoundary from "./PageBlockBoundary";
import JsonBlockForm from "./shared/layout/json/JsonBlockForm";
import LayoutBlockForm from "./shared/layout/LayoutBlockForm";

type UserSession = any;

export function PageBlock({ item, userSession }: { item: PageBlockDto; userSession?: UserSession }) {
  return (
    <>
      <PageBlockBoundary item={item} />
      {item.heading && <HeadingBlock item={item.heading} />}
      {item.banner && <BannerBlock item={item.banner} />}
      {item.header &&
        <Suspense fallback={<></>}>
          <HeaderBlock item={item.header} />
        </Suspense>}
      {item.footer && <FooterBlock item={item.footer} />}
      {item.hero && <HeroBlock item={item.hero} />}
      {item.gallery && <GalleryBlock item={item.gallery} />}
      {item.logoClouds && <LogoCloudsBlock item={item.logoClouds} />}
      {item.video && <VideoBlock item={item.video} />}
      {item.community && <CommunityBlock item={item.community} />}
      {item.testimonials && <TestimonialsBlock item={item.testimonials} />}
      {item.features && <FeaturesBlock item={item.features} />}
      {item.newsletter && <NewsletterBlock item={item.newsletter} />}
      {item.faq && <FaqBlock item={item.faq} />}
      {item.pricing && <PricingBlock item={item.pricing} />}
      {/*   {item.rowsList && <RowsListBlock item={item.rowsList} />}
      {item.rowsNew && <RowsNewBlock item={item.rowsNew} />}
      {item.rowsOverview && <RowsOverviewBlock item={item.rowsOverview} />} */}
    </>
  );
}

export function PageBlockForm({ type, item, onUpdate }: { type: string; item?: PageBlockDto; onUpdate: (item: PageBlockDto) => void }) {
  let block: ReactNode | null = null;
  /*  if (type === "heading") {
     block = <HeadingBlockForm item={item?.heading} onUpdate={(heading) => onUpdate({ heading })} />;
   } else if (type === "banner") {
     block = <BannerBlockForm item={item?.banner} onUpdate={(banner) => onUpdate({ banner })} />;
   } else if (type === "header") {
     block = <HeaderBlockForm item={item?.header} onUpdate={(header) => onUpdate({ header })} />;
   } else if (type === "footer") {
     block = <FooterBlockForm item={item?.footer} onUpdate={(footer) => onUpdate({ footer })} />;
   } else if (type === "hero") {
     block = <HeroBlockForm item={item?.hero} onUpdate={(hero) => onUpdate({ hero })} />;
   } else if (type === "logoClouds") {
     block = <LogoCloudsBlockForm item={item?.logoClouds} onUpdate={(logoClouds) => onUpdate({ logoClouds })} />;
   } else if (type === "gallery") {
     block = <GalleryBlockForm item={item?.gallery} onUpdate={(gallery) => onUpdate({ gallery })} />;
   } else if (type === "video") {
     block = <VideoBlockForm item={item?.video} onUpdate={(video) => onUpdate({ video })} />;
   } else if (type === "community") {
     block = <CommunityBlockForm item={item?.community} onUpdate={(community) => onUpdate({ community })} />;
   } else if (type === "testimonials") {
     block = <TestimonialsBlockForm item={item?.testimonials} onUpdate={(testimonials) => onUpdate({ testimonials })} />;
   } else if (type === "faq") {
     block = <FaqBlockForm item={item?.faq} onUpdate={(faq) => onUpdate({ faq })} />;
   } else if (type === "features") {
     block = <FeaturesBlockForm item={item?.features} onUpdate={(features) => onUpdate({ features })} />;
   } else if (type === "newsletter") {
     block = <NewsletterBlockForm item={item?.newsletter} onUpdate={(newsletter) => onUpdate({ newsletter })} />;
   } else if (type === "pricing") {
     block = <PricingBlockForm item={item?.pricing} onUpdate={(pricing) => onUpdate({ pricing })} />;
   } else if (type === "rowsList") {
     block = <RowsListBlockForm item={item?.rowsList} onUpdate={(rowsList) => onUpdate({ rowsList })} />;
   } else if (type === "rowsNew") {
     block = <RowsNewBlockForm item={item?.rowsNew} onUpdate={(rowsNew) => onUpdate({ rowsNew })} />;
   } else if (type === "rowsOverview") {
     block = <RowsOverviewBlockForm item={item?.rowsOverview} onUpdate={(rowsOverview) => onUpdate({ rowsOverview })} />;
   } else {
     block = <ErrorBanner title="TODO" text={"TODO BLOCK FORM FOR TYPE: " + type} />;
   } */

  const [selectedTab, selectTab] = useState(0);
  return (
    <div className="space-y-4">
      <Tabs asLinks={false} onSelected={(index) => selectTab(index)} tabs={[{ name: `Block` }, { name: `JSON` }]} />
      {selectedTab === 0 && (
        <>
          {block}
          <LayoutBlockForm item={item} onUpdate={(layout) => onUpdate(layout)} />
        </>
      )}
      {selectedTab === 1 && <JsonBlockForm item={item} onUpdate={(block) => onUpdate(block)} />}
    </div>
  );
}