type HydrogenComponent<T extends HydrogenComponentProps = any> = {
  default:
    | ForwardRefExoticComponent<T>
    | ((props: T) => React.JSX.Element)
  schema: HydrogenComponentSchema
  loader?: (args: ComponentLoaderArgs) => Promise<unknown>
}

interface HydrogenComponentProps<L = any> extends WeaverseElement {
  children?: React.JSX.Element[]
  className?: string
  loaderData?: L
}

type HydrogenComponentSchema = SchemaType

interface SchemaType {
  title: string
  type: string
  childTypes?: string[]
  settings?: InspectorGroup[]
  /** @deprecated Use settings. */
  inspector?: InspectorGroup[]
  presets?: {
    children?: ComponentPresets[]
    [key: string]: any
  }
  limit?: number
  enabled?: Resolvable<boolean, ComponentAvailabilityContext>
  /** @deprecated Use enabled. */
  enabledOn?: {
    pages?: PageType[]
    groups?: Array<'*' | ComponentGroup>
  }
}

import { createSchema } from '@weaverse/hydrogen'

export const schema = createSchema({
  type: 'hero-banner',
  title: 'Hero Banner',
  settings: [],
})

interface HydrogenComponentData extends ElementData {
  id: string
  type: string
  children?: { id: string }[]
  data?: Record<
    string,
    ComponentDataValue | Record<string, unknown>
  >
  createdAt?: string
  updatedAt?: string
  deletedAt?: string
}

interface InspectorGroup {
  group: string
  inputs: (BasicInput | HeadingInput)[]
}

interface BasicInput {
  type: InputType
  name: string
  label?: string
  placeholder?: string
  helpText?: string
  configs?: ConfigsProps
  defaultValue?: unknown
  shouldRevalidate?: boolean
  sensitive?: boolean
  condition?: string | Function
}

interface HeadingInput {
  type: 'heading'
  label: string
  [key: string]: unknown
}

type ComponentLoaderArgs<T = any, _E = any> = {
  data: T
  weaverse: WeaverseClient
}

interface RouteLoaderArgs extends LoaderFunctionArgs {
  context: WeaverseRouteAppLoadContext
}

type WeaverseLoaderData = {
  configs: Omit<WeaverseProjectConfigs, 'publicEnv'> & {
    requestInfo: WeaverseLoaderRequestInfo
  }
  page: HydrogenPageData
  project: HydrogenProjectType
  pageAssignment?: HydrogenPageAssignment
}

type HydrogenThemeSettings = {
  [key: string]: any
}

type HydrogenThemeSchema = {
  info: {
    name: string
    version: string
    author: string
    authorProfilePhoto: string
    documentationUrl: string
    supportUrl: string
  }
  /** @deprecated Use settings. */
  inspector?: InspectorGroup[]
  /** Store-wide Media Manager filtering. Not merchant-editable. */
  media?: {
    excludeFilenamePrefixes?: string[]
    excludeProductFiles?: boolean
  }
  settings?: InspectorGroup[]
  i18n?: {
    urlStructure: 'url-path' | 'subdomain' | 'top-level-domain'
    defaultLocale: WeaverseI18n
    shopLocales: WeaverseI18n[]
    staticContent?: Record<string, unknown>
    translation?: boolean
  }
}

type PageType =
  | '*'
  | 'INDEX'
  | 'PRODUCT'
  | 'ALL_PRODUCTS'
  | 'COLLECTION'
  | 'COLLECTION_LIST'
  | 'PAGE'
  | 'BLOG'
  | 'ARTICLE'
  | 'CUSTOM'

interface ComponentAvailabilityContext {
  group: 'body' | 'header' | 'footer'
  page: {
    id: string
    type: PageType
    handle: string
    locale: string
  }
}

type ComponentGroup = 'body' | 'header' | 'footer'

type Resolvable<T, Context> =
  | T
  | ((context: Context) => T)

const schema = createSchema({
  type: 'product-details',
  title: 'Product details',
  enabled: ({ page, group }) =>
    page.type === 'PRODUCT' && group === 'body',
})

type WeaverseI18n = I18nBase & {
  label?: string
  pathPrefix?: string
  [key: string]: any
}

import type { Ref } from 'react'
import {
  createSchema,
  type ComponentLoaderArgs,
  type HydrogenComponentProps,
} from '@weaverse/hydrogen'

type Product = {
  id: string
  title: string
}

type HeroLoaderData = {
  featuredProducts: Product[]
}

type HeroBannerProps = HydrogenComponentProps<HeroLoaderData> & {
  heading: string
  subheading?: string
  ref?: Ref<HTMLElement>
}

function HeroBanner({
  heading,
  subheading,
  loaderData,
  ref,
  ...rest
}: HeroBannerProps) {
  return (
    <section ref={ref} {...rest}>
      <h1>{heading}</h1>
      {subheading && <p>{subheading}</p>}
      {loaderData?.featuredProducts.map((product) => (
        <div key={product.id}>{product.title}</div>
      ))}
    </section>
  )
}

const schema = createSchema({
  type: 'hero-banner',
  title: 'Hero Banner',
  settings: [
    {
      group: 'Content',
      inputs: [
        {
          type: 'text',
          name: 'heading',
          label: 'Heading',
          defaultValue: 'Welcome to our store',
        },
      ],
    },
  ],
})

async function loader({
  weaverse,
}: ComponentLoaderArgs): Promise<HeroLoaderData> {
  const { products } = await weaverse.storefront.query(
    'FEATURED_PRODUCTS_QUERY'
  )

  return {
    featuredProducts: products.nodes,
  }
}

export default HeroBanner
export { loader, schema }

import type { HydrogenEnv } from '@shopify/hydrogen'
import type { WeaverseClient } from '@weaverse/hydrogen'
import type { createHydrogenRouterContext } from './app/.server/context'

declare module 'react-router' {
  interface AppLoadContext
    extends Awaited<ReturnType<typeof createHydrogenRouterContext>> {
    weaverse: WeaverseClient
  }
}

declare global {
  interface Env extends HydrogenEnv {
    WEAVERSE_PROJECT_ID: string
    WEAVERSE_HOST?: string
    WEAVERSE_API_KEY: string
  }
}