import type { PointerEvent, ReactNode } from 'react';

import { TabButton } from '../ui/TabButton';
import { CloseIcon } from '../ui/icons/CloseIcon';

interface ResizeHandlers {
  onPointerDown: (event: PointerEvent) => void;
  onPointerMove: (event: PointerEvent) => void;
  onPointerUp: () => void;
}

interface MapPageSelectionPaneProps {
  width: number;
  resizeHandlers: ResizeHandlers;
  tab: 'properties' | 'area';
  onAreaTabClick: () => void;
  onPropertiesTabClick: () => void;
  onClose: () => void;
  renderAreaPane: () => ReactNode;
  renderPropertiesPane: () => ReactNode;
}

export function MapPageSelectionPane({
  width,
  resizeHandlers,
  tab,
  onAreaTabClick,
  onPropertiesTabClick,
  onClose,
  renderAreaPane,
  renderPropertiesPane,
}: MapPageSelectionPaneProps) {
  return (
    <div
      data-tutorial="right-pane"
      className="flex bg-white dark:bg-navy-950 shadow-lg z-10"
      style={{ width }}
    >
      <div
        className="w-3 cursor-col-resize flex items-center justify-center group bg-warm-100 dark:bg-navy-800 hover:bg-warm-200 dark:hover:bg-navy-700 border-x border-warm-200 dark:border-navy-700"
        {...resizeHandlers}
      >
        <div className="flex flex-col gap-1.5">
          <div className="w-1 h-1 rounded-full bg-warm-300 dark:bg-navy-600 group-hover:bg-warm-400 dark:group-hover:bg-navy-500" />
          <div className="w-1 h-1 rounded-full bg-warm-300 dark:bg-navy-600 group-hover:bg-warm-400 dark:group-hover:bg-navy-500" />
          <div className="w-1 h-1 rounded-full bg-warm-300 dark:bg-navy-600 group-hover:bg-warm-400 dark:group-hover:bg-navy-500" />
        </div>
      </div>
      <div className="flex-1 flex flex-col overflow-hidden">
        <div className="flex border-b border-warm-200 dark:border-navy-700 text-sm">
          <TabButton label="Area" isActive={tab === 'area'} onClick={onAreaTabClick} />
          <TabButton
            label="Properties"
            isActive={tab === 'properties'}
            onClick={onPropertiesTabClick}
          />
          <button
            onClick={onClose}
            className="px-2 flex items-center text-warm-400 hover:text-warm-700 dark:hover:text-warm-300"
            title="Close pane"
          >
            <CloseIcon className="w-4 h-4" />
          </button>
        </div>

        <div className="flex-1 overflow-hidden">
          {tab === 'properties' ? renderPropertiesPane() : renderAreaPane()}
        </div>
      </div>
    </div>
  );
}