"use client";
import { useRef, Suspense, lazy } from "react";
import { TextLink } from "@/app/components/button";
import Image from "next/image";
import Link from "next/link";
import ScrollOnParam from "@/app/components/common/scroll-on-param";
import { AWS_CDN_URL } from "@/utils/staticValues";

const HeroCoCreation = lazy(
  () => import("@/app/components/co-creation/hero-cc"),
);
const ProductHomeSwiper = lazy(
  () => import("@/app/components/home/HomeStoriesSwiper"),
);

const CCVision = lazy(() => import("@/app/components/co-creation/ccVision"));
const StartFromScratch = lazy(
  () => import("@/app/components/co-creation/startFromScratch"),
);
const StoreThumbs = lazy(
  () => import("@/app/components/co-creation/cc-store-thumbs"),
);
const CoCreatorsList = lazy(
  () => import("@/app/components/co-creation/cc-co-creators"),
);

interface dhDTO {
  id: any;
  name: any;
  pieces_bio: any;
  logo: any;
  profile_images: any;
  based_in_city: any;
  bio_image: any;
  bio: any;
  herobgfrom: string;
  herolbgvia: string;
  herolbgto: string;
  pageBg: string;
  font_color: string;
  primary_color: string;
  secondary_color: string;
  hlgtColor: string;
  hexcode_for_bg: string;
  hexcode_for_button: string;
  hero_bg_from: string;
  hero_bg_to: string;
  hero_bg_via: string;
  high_light_color: string;
  product: any[];
  base64_id: string;
  slug: string;
}

interface CoCreationClientProps {
  designHouse: dhDTO[];
  coCreator: any[];
}

export default function CoCreationClient({
  designHouse,
  coCreator,
}: CoCreationClientProps) {
  const sectionRef = useRef<HTMLDivElement | null>(null);

  return (
    <div className="flex flex-col pt-12">
      <div className="flex flex-col md:flex-col-reverse">
        <Suspense>
          <HeroCoCreation />
        </Suspense>
        <Suspense>
          <CCVision />
        </Suspense>
      </div>
      <Suspense>
        <ProductHomeSwiper />
      </Suspense>

      <div className="relative flex w-full flex-col py-10 md:pb-20">
        <div className="absolute top-0 left-0 z-2 h-full w-full bg-linear-to-t from-gray-100 via-teal-300 to-blue-600"></div>
        <div className="mob-noise absolute top-0 left-0 z-3 h-full w-full"></div>
        <div className="wrapper relative z-11">
          <div className="flex w-full flex-col justify-center text-center align-middle">
            <div className="mx-auto flex w-full flex-col gap-5 md:w-[40%] md:pb-0">
              <h1>
                explore
                <br />
                Co-creators
              </h1>
              <p className="font-bogart text-xl font-light">
                Connect with visionary minds, explore their work, and co-create
                signature pieces together
              </p>
            </div>
            <Suspense>
              <CoCreatorsList otherCoCreator={coCreator} />
            </Suspense>
          </div>
        </div>
      </div>

      <div className="mob-noise flex flex-col">
        <div className="wrapper">
          <div className="flex w-full flex-col gap-4 md:gap-0">
            <div className="flex w-full flex-col justify-center pt-15 text-center align-middle">
              <div className="mx-auto flex w-full flex-col gap-5 md:w-[35%]">
                <div className="heading-title">
                  explore
                  <br />
                  design houses
                </div>
                <p className="font-bogart text-xl font-light">
                  Check our partnered design houses and stylists to work with
                  them to bring your ideas to life.
                </p>
              </div>
            </div>

            <div className="flex w-full flex-col" ref={sectionRef}>
              <Suspense>
                <ScrollOnParam sectionRef={sectionRef} />
              </Suspense>
              {designHouse.length > 0 &&
                designHouse.map((dh, index) => (
                  <div
                    key={index}
                    className="relative flex w-full flex-col gap-5 py-10 md:flex-row md:gap-10 md:py-10"
                  >
                    <div className="relative flex-col md:flex md:w-[60%]">
                      <div className="mb-5 flex w-full flex-col gap-10 md:mb-10">
                        <div className="flex w-full flex-col gap-2 md:gap-4">
                          <div className="flex flex-col items-end justify-between gap-2 align-bottom md:flex-row md:gap-4">
                            <Link
                              href={`/design-houses/${dh?.slug}`}
                              className="relative flex w-full underline-offset-6 hover:underline md:w-[64%]"
                            >
                              <span className="font-bogart text-2xl capitalize">
                                {dh?.name}
                              </span>
                              <span className="relative mt-2">
                                <i className="icon-[solar--arrow-right-up-broken]"></i>
                              </span>
                            </Link>
                            <div className="flex w-full text-left text-xs md:w-[32%] md:text-right">
                              <div className="line-clamp-3">{dh?.bio}</div>
                            </div>
                          </div>
                          <div className="relative flex w-full">
                            <div className="flex w-full border-1">
                              <Image
                                src={`${AWS_CDN_URL}/${dh?.bio_image}`}
                                width={1200}
                                height={600}
                                alt={dh?.name}
                                className="img-responsive"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div className="top-[64px] flex w-full flex-col md:sticky md:w-[40%]">
                      <div className="flex w-full flex-col gap-2 md:mt-8">
                        <div className="font-medium">
                          Designs by{" "}
                          <span className="capitalize">{dh?.name}</span>
                        </div>
                        <Suspense>
                          <div className="grid gap-4 md:grid-cols-3">
                            <StoreThumbs products={dh?.product} />
                          </div>
                        </Suspense>
                        <div>
                          <TextLink
                            id="link_cc_store"
                            href={`category?design_house=${dh?.base64_id}`}
                            label="Explore More Designs"
                            color="gray"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}