import {
  createFieldShopifyProduct,
  createFieldShopifyCollection,
} from "@reacteditor/field-shopify";

import { navigationEditor } from "@/components/navigation/navigation.editor";
import { footerEditor } from "@/components/footer/footer.editor";

import { heroEditor } from "@/components/hero/hero.editor";
import { bannerEditor } from "@/components/landing/banner.editor";

import { createFeaturedProductEditor } from "@/components/commerce/featured-product.editor";
import { createProductsGridEditor } from "@/components/commerce/products-grid.editor";
import { createProductsCarouselEditor } from "@/components/commerce/products-carousel.editor";
import { collectionGridEditor } from "@/components/commerce/collection-grid.editor";
import { createCollectionEditor } from "@/components/commerce/collection.editor";
import { createProductDetailsEditor } from "@/components/commerce/product-details.editor";
import { createRecommendedProductsEditor } from "@/components/commerce/recommended-products.editor";

import { featuresEditor } from "@/components/features/features.editor";
import { testimonialsEditor } from "@/components/testimonials/testimonials.editor";
import { imageGalleryEditor } from "@/components/landing/image-gallery.editor";
import { newsletterCtaEditor } from "@/components/landing/newsletter-cta.editor";
import { logosEditor } from "@/components/logos/logos.editor";
import { ctaEditor } from "@/components/cta/cta.editor";
import { faqEditor } from "@/components/faq/faq.editor";

import Root from "@/config/root";
import type { UserConfig } from "@/config/types";
import { initialData } from "@/config/initial-data";

export type CreateConfigOptions = {
  domain: string;
  token?: string | null;
};

export function createConfig({ domain, token }: CreateConfigOptions): UserConfig {
  const productField = createFieldShopifyProduct({
    storeDomain: domain,
    storefrontAccessToken: token ?? undefined,
  }) as any;
  const collectionField = createFieldShopifyCollection({
    storeDomain: domain,
    storefrontAccessToken: token ?? undefined,
  }) as any;

  return {
    root: Root,
    categories: {
      navigation: { title: "Navigation" },
      hero: { title: "Hero & Banners" },
      commerce: { title: "Commerce" },
      content: { title: "Content" },
      footer: { title: "Footer" },
    },
    components: {
      navigation: navigationEditor,
      hero: heroEditor,
      banner: bannerEditor,
      "featured-product": createFeaturedProductEditor({ productField }),
      "products-grid": createProductsGridEditor({ collectionField }),
      "products-carousel": createProductsCarouselEditor({ collectionField }),
      "collection-grid": collectionGridEditor,
      collection: createCollectionEditor({ collectionField }),
      "product-details": createProductDetailsEditor({ productField }),
      "recommended-products": createRecommendedProductsEditor({ productField }),
      features: featuresEditor,
      testimonials: testimonialsEditor,
      "image-gallery": imageGalleryEditor,
      "newsletter-cta": newsletterCtaEditor,
      logos: logosEditor,
      cta: ctaEditor,
      faq: faqEditor,
      footer: footerEditor,
    } as any,
  };
}

function toBase64(s: string): string {
  if (typeof btoa === "function") return btoa(unescape(encodeURIComponent(s)));
  return Buffer.from(s, "utf8").toString("base64");
}

export const componentKey = toBase64(
  `commerce-redesign-${JSON.stringify({ initialData })}`,
);

export default createConfig;