//
// Copyright 2022 DXOS.org
//

import {
  Children,
  type CSSProperties,
  type ForwardedRef,
  type ForwardRefExoticComponent,
  type HTMLAttributes,
  type ReactNode,
  type RefAttributes,
  createElement,
  forwardRef,
  isValidElement,
} from 'react';

import { log } from '@dxos/log';
import { mx } from '@dxos/ui-theme';
import { type ComposableProps, type SlottableProps, type ThemedClassName } from '@dxos/ui-types';

/**
 * Reconciles className properties from a parent slot.
 * - `className` is set by the Slot merge mechanism.
 * - `classNames` is the consumer-facing prop for theming overrides.
 * Use `composableProps` to reconcile both into a single `className`.
 */
export const composableProps = <P extends HTMLElement = HTMLElement>(
  { className, classNames, role, style, ...props }: ComposableProps,
  { classNames: defaultClassNames, ...defaults }: ThemedClassName<Partial<HTMLAttributes<P>>> | undefined = {},
) => ({
  // Default props.
  ...(defaults as object),

  // Spread supplied props.
  ...props,

  // Prefer explicit role, then defaults role, then 'none'.
  role: role ?? defaults.role ?? 'none',

  // Merge styles.
  style: { ...defaults.style, ...style } as CSSProperties,

  // Compose classnames.
  className: mx(defaultClassNames, className, classNames),
});

/** Symbol used to mark components created by `composable()` or `slottable()`. */
const COMPOSABLE = Symbol.for('dxos.composable');

/**
 * Factory for slottable components.
 * The implementation receives full `HTMLAttributes<E>` so it can destructure `role`, `style`, etc.
 * Consumers see only `SlottableProps<P>` — a narrow type exposing `classNames`, `className`,
 * `children`, `asChild`, and the custom props `P`.
 *
 * @example
 * ```tsx
 * const MyPanel = slottable<HTMLDivElement, { border?: boolean }>(
 *   ({ children, asChild, border, ...props }, forwardedRef) => {
 *     const Comp = asChild ? Slot : Primitive.div;
 *     return (
 *       <Comp {...composableProps(props, { classNames: border && 'border' })} ref={forwardedRef}>
 *         {children}
 *       </Comp>
 *     );
 *   },
 * );
 * ```
 */
export function slottable<E extends HTMLElement, P extends object = {}>(
  render: (props: SlottableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => ReactNode,
): ForwardRefExoticComponent<SlottableProps<P> & RefAttributes<E>> {
  const wrapped = (props: SlottableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => {
    let warn = false;
    if (props.asChild) {
      try {
        const child = Children.only(props.children);
        if (isValidElement(child) && typeof child.type !== 'string' && !(child.type as any)[COMPOSABLE]) {
          warn = true;
          log.warn('slot child is not composable; create it with composable() or slottable()', {
            child: (child.type as any).displayName ?? (child.type as any).name,
          });
        }
      } catch {
        // Children.only throws if not exactly one child — Slot handles this.
      }
    }

    const result = render(props, forwardedRef);
    if (warn) {
      return createElement('div', { role: 'none', className: 'dx-slot-warning' }, result);
    }

    return result;
  };

  const component = forwardRef(wrapped as any) as any;
  (component as any)[COMPOSABLE] = true;
  return component;
}

/**
 * Factory for composable (leaf) components.
 * The implementation receives full `HTMLAttributes<E>` so it can destructure `role`, `style`, etc.
 * Consumers see only `ComposableProps<P>` — a narrow type exposing `classNames`, `className`,
 * `children`, and the custom props `P`.
 *
 * For generic components, use `any` for the type parameter inside `composable` and
 * cast the result to restore the generic signature for consumers.
 *
 * @example
 * ```tsx
 * const Leaf = composable<HTMLButtonElement>(({ children, ...props }, forwardedRef) => {
 *   return (
 *     <button {...composableProps(props, { classNames: 'btn' })} ref={forwardedRef}>
 *       {children}
 *     </button>
 *   );
 * });
 * ```
 */
export function composable<E extends HTMLElement, P extends object = {}>(
  render: (props: ComposableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => ReactNode,
): ForwardRefExoticComponent<ComposableProps<P> & RefAttributes<E>> {
  const component = forwardRef(render as any) as any;
  (component as any)[COMPOSABLE] = true;
  return component;
}