import clsx from 'clsx';
import React, { useRef } from 'react';
import { IconName, Icons } from '../Icons';
import classes from './InfoPanel.scss';
import { useCollapse } from './hooks/useCollapse';

export interface InfoPanelProps {
  /**
   * Width of the container (any CSS value: px, %, rem, etc.)
   * Note: For auto-collapse to work, width must be in px format (e.g., "480px")
   * or minWidthThreshold must be explicitly provided
   */
  width?: string;

  /** Optional class */
  className?: string;

  /** Enable collapsible functionality (default: true) */
  collapsible?: boolean;

  /** Initial collapsed state (default: false) */
  defaultCollapsed?: boolean;

  /** Callback when collapse state changes */
  onCollapseChange?: (collapsed: boolean) => void;

  /**
   * Minimum width threshold in pixels for auto-collapse
   * If not provided, will be parsed from width prop (only works if width is in px format)
   * Required for auto-collapse when width is percentage, rem, or CSS variable
   */
  minWidthThreshold?: number;

  /** Minimum width of the sibling content (default: 740px) */
  siblingMinWidth?: number;
}

export const InfoPanel: React.FC<InfoPanelProps> = ({
  children,
  className,
  width = '480px',
  collapsible = true,
  defaultCollapsed = false,
  onCollapseChange,
  minWidthThreshold,
  siblingMinWidth = 740,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);

  const { toggleCollapse, isCollapsed, isInitialized, transitionsEnabled } =
    useCollapse({
      containerRef,
      width,
      minWidthThreshold,
      collapsible,
      defaultCollapsed,
      siblingMinWidth,
      onCollapseChange,
    });

  const currentWidth = isCollapsed ? '24px' : width;

  // Render a minimal placeholder until we know the correct collapsed state
  if (!isInitialized && collapsible) {
    return (
      <div
        ref={containerRef}
        className={clsx(className, 'info-panel-container', classes.container)}
        style={{ visibility: 'hidden', width: currentWidth }}
        data-test-id="info-panel"
      />
    );
  }

  return (
    <div
      ref={containerRef}
      className={clsx(className, 'info-panel-container', classes.container, {
        [classes.collapsed]: isCollapsed,
        [classes.noTransition]: !transitionsEnabled,
      })}
      style={
        {
          width: currentWidth,
          '--panel-width': width,
        } as React.CSSProperties
      }
      data-test-id="info-panel"
    >
      {collapsible && (
        <button
          className={classes.collapseButton}
          onClick={toggleCollapse}
          aria-label={isCollapsed ? 'Expand panel' : 'Collapse panel'}
          data-test-id="info-panel-collapse-button"
          title={isCollapsed ? 'Expand panel' : 'Collapse panel'}
        >
          <Icons
            className={classes.collapseIcon}
            icon={isCollapsed ? IconName.CollapseLeft : IconName.CollapseRight}
          />
        </button>
      )}

      <div className={classes.contentWrapper}>
        <div className={classes.content}>{children}</div>
        <div className={classes.filler} />
      </div>
    </div>
  );
};
