/**
 * @file CustomPanelResizeHandle.tsx - Custom resize handle component for the react-resizable-panels library.
 * Renders a visually styled drag handle with a centered circle icon that switches orientation (horizontal/vertical dots) based on the current Bootstrap breakpoint.
 */

import { Icon } from '../Icon.tsx';
import { PanelResizeHandle } from 'react-resizable-panels';
import { useMediaQuery } from 'react-responsive';
import { breakpoints } from '../../utils/bootstrapBreakpoints.ts';

/**
 * Custom resize handle for use with <PanelGroup> elements from 'react-resizable-panels', complete with Bootstrap styling.
 */
export const CustomPanelResizeHandle = () => {
  const isMobileLg = useMediaQuery({ maxWidth: breakpoints.lg - 1 });

  return (
    <PanelResizeHandle>
      <div className={'position-relative h-100 w-100'}>
        {/* Subtle background line indicating the resize track */}
        <div
          className={`position-absolute ${isMobileLg ? 'start-0 end-0 top-50 translate-middle-y' : 'top-0 bottom-0 start-50 translate-middle-x'} bg-secondary-subtle opacity-50 z-0`}
          style={isMobileLg ? { height: '0.25rem' } : { width: '0.25rem' }}
        ></div>
        {/* Centered circular drag handle icon */}
        <div
          className={
            'd-flex justify-content-center align-items-center h-100 z-1 position-relative'
          }
        >
          <div
            className={
              'border rounded-circle bg-white d-flex justify-content-center align-items-center p-1'
            }
          >
            <Icon iconName={isMobileLg ? 'ThreeDots' : 'ThreeDotsVertical'} />
          </div>
        </div>
      </div>
    </PanelResizeHandle>
  );
};
