'use client'
import { forwardRef, useMemo } from 'react'
import { AppDefault } from './AppDefault.js'
import type { WidgetDrawer } from './AppDrawer.js'
import { AppDrawer } from './AppDrawer.js'
import { AppProvider } from './AppProvider.js'
import type { WidgetConfig, WidgetProps } from './types/widget.js'

export const App = forwardRef<WidgetDrawer, WidgetProps>((props, ref) => {
  const config: WidgetConfig = useMemo(() => {
    const widgetConfig = { ...props, ...props.config }
    const {
      fromChain = widgetConfig.defaultChain,
      fromToken = widgetConfig.defaultFromToken,
      toChain = widgetConfig.defaultChain,
      toToken = widgetConfig.defaultToToken,
    } = widgetConfig
    const config = { ...widgetConfig, fromChain, fromToken, toChain, toToken }
    if (config.variant === 'drawer') {
      config.theme = {
        ...config.theme,
        container: {
          height: '100%',
          ...config.theme?.container,
        },
      }
    }

    // config.subvariant = 'bridge'
    // config.subvariantOptions = {
    //   custom: 'checkout',
    //   split: 'bridge',
    // }

    return config
  }, [props])

  if (config.variant === 'drawer') {
    return (
      <AppProvider config={config} formRef={props.formRef}>
        <AppDrawer
          ref={ref}
          elementRef={props.elementRef}
          config={config}
          open={props.open}
          onClose={props.onClose}
        >
          <AppDefault />
        </AppDrawer>
      </AppProvider>
    )
  }
  return (
    <AppProvider config={config} formRef={props.formRef}>
      <AppDefault />
    </AppProvider>
  )
})