import type { EditorMode } from '../editors/types';
import { EditIcon, ViewIcon } from '../icons';

type EditorModeToggleProps = {
  mode: EditorMode;
  onChange: (mode: EditorMode) => void;
  /** Disable interaction (e.g. when the active tab has no document). */
  disabled?: boolean;
};

const BASE_BUTTON =
  'flex size-6 cursor-pointer items-center justify-center disabled:cursor-default';

/**
 * Conjoined two-button Edit / View segmented control. The selected button is
 * highlighted; both carry a tooltip + aria-label. Emits the *other* mode on
 * click of the unselected side.
 */
export function EditorModeToggle({
  mode,
  onChange,
  disabled,
}: EditorModeToggleProps) {
  const buttonClass = (active: boolean) =>
    `${BASE_BUTTON} ${
      active
        ? 'bg-border/50 text-foreground'
        : 'text-foreground/60 hover:bg-border/40'
    }`;

  return (
    <div
      role="group"
      aria-label="Editor mode"
      className="border-border flex overflow-hidden rounded border"
    >
      <button
        type="button"
        title="Edit mode"
        aria-label="Edit mode"
        aria-pressed={mode === 'edit'}
        disabled={disabled}
        onClick={() => onChange('edit')}
        className={buttonClass(mode === 'edit')}
      >
        <EditIcon className="size-4" />
      </button>
      <button
        type="button"
        title="View mode"
        aria-label="View mode"
        aria-pressed={mode === 'view'}
        disabled={disabled}
        onClick={() => onChange('view')}
        className={`border-border border-l ${buttonClass(mode === 'view')}`}
      >
        <ViewIcon className="size-4" />
      </button>
    </div>
  );
}