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 { searchProductsEditor } from "@/components/commerce/search-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";

const SHOPIFY_DOMAIN =
  process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop";
const STOREFRONT_TOKEN =
  process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN ?? "";

const productField = createFieldShopifyProduct({
  storeDomain: SHOPIFY_DOMAIN,
  storefrontAccessToken: STOREFRONT_TOKEN || undefined,
}) as any;

const collectionField = createFieldShopifyCollection({
  storeDomain: SHOPIFY_DOMAIN,
  storefrontAccessToken: STOREFRONT_TOKEN || undefined,
}) as any;

const categories = {
  navigation: { title: "Navigation" },
  hero: { title: "Hero & Banners" },
  commerce: { title: "Commerce" },
  content: { title: "Content" },
  footer: { title: "Footer" },
};

const sharedComponents = {
  navigation: navigationEditor,
  footer: footerEditor,
};

export const homeConfig: UserConfig = {
  root: Root,
  categories,
  components: {
    ...sharedComponents,
    hero: heroEditor,
    banner: bannerEditor,
    "featured-product": createFeaturedProductEditor({ productField }),
    "products-grid": createProductsGridEditor({ collectionField }),
    "products-carousel": createProductsCarouselEditor({ collectionField }),
    "collection-grid": collectionGridEditor,
    features: featuresEditor,
    testimonials: testimonialsEditor,
    "image-gallery": imageGalleryEditor,
    "newsletter-cta": newsletterCtaEditor,
    logos: logosEditor,
    cta: ctaEditor,
    faq: faqEditor,
  } as any,
};

export const productConfig: UserConfig = {
  root: Root,
  categories,
  components: {
    ...sharedComponents,
    "product-details": createProductDetailsEditor({ productField }),
    "recommended-products": createRecommendedProductsEditor({ productField }),
    "products-carousel": createProductsCarouselEditor({ collectionField }),
  } as any,
};

export const collectionsConfig: UserConfig = {
  root: Root,
  categories,
  components: {
    ...sharedComponents,
    collection: createCollectionEditor({ collectionField }),
  } as any,
};

export const searchConfig: UserConfig = {
  root: Root,
  categories,
  components: {
    ...sharedComponents,
    "search-products": searchProductsEditor,
  } as any,
};