import CartMismatchBanner from "@modules/layout/components/cart-mismatch-banner"
import FreeShippingPriceNudge from "@modules/shipping/components/free-shipping-price-nudge"
import { DynamicLayoutRenderer } from "./renderer"
import React from "react"
import VtNav from "@modules/layout/templates/vt-nav"
import VtFooter from "@modules/layout/templates/vt-footer"
import HomeButton from "@modules/layout/components/vt-homebutton"
import AccountButton from "@modules/layout/components/vt-accountbutton"
import VtCartButton from "@modules/layout/components/vt-cartbutton"
import VtHeader from "@modules/layout/templates/vt-header"
import Banner from "@modules/layout/templates/vt-banner"
import VtMegaMenu from "@modules/layout/components/vt-mega-menu"
import VtLink from "@modules/layout/components/vt-linkbutton"
import VtSideMenu from "@modules/layout/components/vt-sidemenu"
import VtDropdown from "@modules/layout/templates/vt-dropdown"
import VtSearchInput from "@modules/layout/templates/vt-search-input"
import VtCurrencySelect from "@modules/layout/templates/vt-currency-select"
import VtMenuItem from "@modules/layout/templates/vt-menu-item"
import VtCountryCodeSelect from "@modules/layout/templates/vt-country-select/server"
import VtSocialLinks from "@modules/layout/templates/vt-social-link"
import VtFooterHero from "@modules/layout/templates/vt-footer/vt-footer-hero"
import VtFooterBottom from "@modules/layout/templates/vt-footer/vt-footer-bottom"
import VtLogo from "@modules/layout/templates/vt-logo"
import VtFooterSignUp from "@modules/layout/templates/vt-footer/vt-footer-signup"
import Hero from "@modules/layout/templates/hero"
import { VtCarousel } from "@modules/layout/templates/vt-carousel"
import { VtCtaBanner } from "@modules/layout/templates/vt-cta-banner"
import VtFeaturedProducts from "@modules/home/components/vt-featured-products"
import VtCategoryHighlight from "@modules/home/components/vt-category-highlight"
import VtBrand from "@modules/home/components/vt-brand"
import VtFeedback from "@modules/home/components/vt-feedback"
import VtFeedbackCard from "@modules/home/components/vt-feedback-card"
import VtSubcription from "@modules/home/components/vt-subcription"

type ComponentConfig = Record<string, any>

export interface LayoutComponentDefinition {
  config?: ComponentConfig
  children?: LayoutComponentNode[]
}

export interface LayoutContext {
  customer: any
  cart: any
  shippingOptions: any[]
  contentChildren: React.ReactNode
  countryCode?: string
  region?: any
}

export type ComponentRenderer = {
  render: (
    entry: LayoutComponentDefinition,
    ctx: LayoutContext
  ) => React.ReactNode
}

// Utility methods
const configOnly = (
  Component: React.ComponentType<any>
): ComponentRenderer => ({
  render: (entry) => <Component {...entry.config} />,
})

const nodesContextRenderer = (
  Component: React.ComponentType<any>
): ComponentRenderer => ({
  render: (entry: any, ctx: LayoutContext) => (
    <Component nodes={entry} context={ctx} />
  ),
})

const renderChildren = (entry: LayoutComponentDefinition, ctx: LayoutContext) =>
  entry.children ? (
    <DynamicLayoutRenderer nodes={entry.children} context={ctx} />
  ) : null

// Component Map
export const componentMap: Record<string, ComponentRenderer> = {
  Header: nodesContextRenderer(VtHeader),
  Nav: nodesContextRenderer(VtNav),
  Hero: nodesContextRenderer(Hero),
  VtMegaMenu: nodesContextRenderer(VtMegaMenu),
  VtSideMenu: nodesContextRenderer(VtSideMenu),
  Banner: nodesContextRenderer(Banner),
  HomeButton: nodesContextRenderer(HomeButton),
  Logo: nodesContextRenderer(VtLogo),
  AccountButton: nodesContextRenderer(AccountButton),
  SearchInput: nodesContextRenderer(VtSearchInput),
  VtCartButton: nodesContextRenderer(VtCartButton),
  VtCurrencySelect: nodesContextRenderer(VtCurrencySelect),
  VtCountryCodeSelect: nodesContextRenderer(VtCountryCodeSelect),
  VtSocialLinks: nodesContextRenderer(VtSocialLinks),
  Link: nodesContextRenderer(VtLink),
  Dropdown: nodesContextRenderer(VtDropdown),
  VtMenuItem: nodesContextRenderer(VtMenuItem),
  CartMismatchBanner: configOnly(CartMismatchBanner),
  FreeShippingPriceNudge: configOnly(FreeShippingPriceNudge),
  PropsChildren: {
    render: (_props, ctx) => ctx.contentChildren, // PageLayout's props.children
  },
  VtCtaBanner: nodesContextRenderer(VtCtaBanner),
  VtFooterHero: nodesContextRenderer(VtFooterHero),
  VtFooterBottom: nodesContextRenderer(VtFooterBottom),
  VtFooterSignUp: nodesContextRenderer(VtFooterSignUp),
  Footer: nodesContextRenderer(VtFooter),
  ImageDisplayer: nodesContextRenderer(VtCarousel),
  VtFeaturedProducts: nodesContextRenderer(VtFeaturedProducts),
  VtCategoryHighlight: nodesContextRenderer(VtCategoryHighlight),
  VtBrand: nodesContextRenderer(VtBrand),
  VtFeedback: nodesContextRenderer(VtFeedback),
  VtFeedbackCard: nodesContextRenderer(VtFeedbackCard),
  VtSubcription: nodesContextRenderer(VtSubcription),
}

export type ComponentName = keyof typeof componentMap

// //maps key = componentName to value = props + children
// export type LayoutComponentNode = Record<string, LayoutComponentDefinition>
export type LayoutComponentNode = {
  [K in ComponentName]: LayoutComponentDefinition
}[ComponentName]
