import { forwardRef } from 'react';
import { getWebProps } from 'react-native-unistyles/web';
import { DividerProps } from './types';
import { dividerStyles } from './Divider.styles';
import useMergeRefs from '../hooks/useMergeRefs';
import type { IdealystElement } from '../utils/refTypes';

/**
 * Visual separator for dividing content sections horizontally or vertically.
 * Supports solid, dashed, and dotted styles with optional text content.
 */
const Divider = forwardRef<IdealystElement, DividerProps>(({
  orientation = 'horizontal',
  type = 'solid',
  size = 'sm',
  intent = 'neutral',
  length = 'full',
  spacing = 'md',
  children,
  style,
  testID,
  accessibilityLabel,
  id,
}, ref) => {
  // Apply variants for container, content (orientation, spacing)
  dividerStyles.useVariants({
    orientation,
    spacing,
    length: typeof length === 'number' ? 'auto' : length,
  });

  // Get dynamic divider style
  const dividerStyle = (dividerStyles.divider as any)({
    orientation,
    size,
    type,
    intent,
    spacing,
  });

  // Get dynamic line style
  const lineStyle = (dividerStyles.line as any)({
    orientation,
    size,
  });

  // Generate web props
  const dividerProps = getWebProps([dividerStyle, style as any]);
  const containerProps = getWebProps([dividerStyles.container as any]);
  const contentProps = getWebProps([dividerStyles.content as any]);
  const lineProps = getWebProps([lineStyle]);

  const mergedDividerRef = useMergeRefs(ref, dividerProps.ref);
  const mergedContainerRef = useMergeRefs(ref, containerProps.ref);

  // If no children, render simple divider
  if (!children) {
    return (
      <div
        {...dividerProps}
        ref={mergedDividerRef}
        id={id}
        data-testid={testID}
        aria-label={accessibilityLabel}
        role="separator"
      />
    );
  }

  // If has children, render divider with content
  return (
    <div
      {...containerProps}
      ref={mergedContainerRef}
      id={id}
      data-testid={testID}
      aria-label={accessibilityLabel}
      role="separator"
    >
      <div {...lineProps} />
      <span {...contentProps}>
        {children}
      </span>
      <div {...lineProps} />
    </div>
  );
});

Divider.displayName = 'Divider';

export default Divider;