/**
 * ConstructorControlsPanel Component
 *
 * Draggable panel with page selector, mode toggle, and exit button.
 * Used in constructor for top-level navigation controls.
 */

import React from 'react';
import BaseButton from '../BaseButton';
import { mdiExitToApp } from '@mdi/js';
import PageSelector from './PageSelector';
import InteractionModeToggle from './InteractionModeToggle';
import type { Position, TourPage, ConstructorInteractionMode } from './types';

interface ConstructorControlsPanelProps {
  projectId: string;
  pages: TourPage[];
  activePageId: string;
  interactionMode: ConstructorInteractionMode;
  position: Position;
  onPageChange: (pageId: string) => void;
  onModeChange: (mode: ConstructorInteractionMode) => void;
  onDragStart: (event: React.MouseEvent) => void;
}

const ConstructorControlsPanel: React.FC<ConstructorControlsPanelProps> = ({
  projectId,
  pages,
  activePageId,
  interactionMode,
  position,
  onPageChange,
  onModeChange,
  onDragStart,
}) => {
  return (
    <div
      className='fixed z-[1000] w-[min(92vw,460px)] rounded-lg border border-gray-200 bg-white shadow-xl'
      style={{
        left: position.x,
        top: position.y,
      }}
    >
      <div
        className='flex cursor-move items-center justify-between rounded-t-lg border-b border-gray-200 bg-gray-50 px-3 py-2'
        onMouseDown={onDragStart}
      >
        <span className='text-xs font-bold uppercase'>
          Constructor Controls
        </span>
      </div>
      <div className='space-y-2 p-3'>
        <div className='flex flex-wrap items-center gap-2'>
          <PageSelector
            pages={pages}
            activePageId={activePageId}
            onPageChange={onPageChange}
          />
          <BaseButton
            color='lightDark'
            label='Exit to Assets'
            icon={mdiExitToApp}
            href={
              projectId ? `/projects/${projectId}` : '/projects/projects-list'
            }
          />
        </div>
        <InteractionModeToggle
          mode={interactionMode}
          onModeChange={onModeChange}
        />
      </div>
    </div>
  );
};

export default ConstructorControlsPanel;