/**
 * Panel "Camera" — Projektion (2D/3D), 2D/3D-Toggle-Sichtbarkeit auf der
 * Website und Standard-3D-Kamerawinkel.
 *
 * Sichtbarkeit pro Layout via `cePdEditorExt`:
 *   - layoutSupportsOrthographic(layout): false bei `arc`/`surface` (immer 3D).
 *   - layoutHidesCameraPreset(layout)   : true bei `surface` (kein Preset).
 *
 * Wenn beide Flags den Reiter komplett leer lassen wuerden (nur `surface`),
 * rendert das Panel `null` und verschwindet damit aus den InspectorControls.
 */
import { cePdEditorExt } from '../editorExt.js';

const { createElement: el } = wp.element;
const { __ } = wp.i18n;
const { PanelBody, ToggleControl, SelectControl, RangeControl } = wp.components;

/* Start-Zoom wird als userZoomFactorPersp (0.5–2) gespeichert: kleiner = näher.
 * Im UI als intuitiver Prozentwert (höher = näher) dargestellt. */
const START_ZOOM_FACTOR_MIN = 0.5;
const START_ZOOM_FACTOR_MAX = 2;

function startZoomFactorToPercent(factor) {
  const f = (typeof factor === 'number' && isFinite(factor) && factor > 0) ? factor : 1;
  return Math.round(100 / f);
}

function startZoomPercentToFactor(percent) {
  const p = (typeof percent === 'number' && isFinite(percent) && percent > 0) ? percent : 100;
  const f = Math.max(START_ZOOM_FACTOR_MIN, Math.min(START_ZOOM_FACTOR_MAX, 100 / p));
  return Math.round(f * 1000) / 1000;
}

export function CameraPanel({ attributes, setAttributes, layout, openState }) {
  /* Stairs-Donut ist ein reines 3D-Layout (liegende Treppenform): kein 2D/3D-Umschalter,
   * weder im Editor noch im Frontend (spiegelt render.php / previewWrapper). Die 2D/3D-
   * Controls werden daher ausgeblendet — Kamerawinkel und Start-Zoom bleiben aber nutzbar. */
  const isStairsLayout       = layout === 'pieStairs';
  const supportsOrthographic = !isStairsLayout && cePdEditorExt.layoutSupportsOrthographic(layout);
  const hidesCameraPreset    = cePdEditorExt.layoutHidesCameraPreset(layout);
  if (!supportsOrthographic && hidesCameraPreset) return null;

  return el(PanelBody, { title: __('Camera', 'pop3d-charts'), ...(openState || {}) },
    supportsOrthographic ? el(ToggleControl, {
      label: __('3D view', 'pop3d-charts'),
      checked: (attributes.defaultProjection || '3d') === '3d',
      onChange: (v) => setAttributes({ defaultProjection: v ? '3d' : '2d' }),
      __nextHasNoMarginBottom: true,
    }) : null,
    supportsOrthographic ? el(ToggleControl, {
      label: __('Show 2D/3D toggle on the website', 'pop3d-charts'),
      help: __('When enabled, visitors see a button to switch between 2D and 3D.', 'pop3d-charts'),
      checked: attributes.viewerProjectionToggleEnabled !== false,
      onChange: (v) => setAttributes({ viewerProjectionToggleEnabled: v }),
      __nextHasNoMarginBottom: true,
    }) : null,

    hidesCameraPreset ? null : el(SelectControl, {
      label: __('Default 3D camera angle', 'pop3d-charts'),
      help: __('Used when the chart first appears in 3D and when switching from 2D to 3D on the site.', 'pop3d-charts'),
      value: (typeof attributes.cameraPreset === 'string' && attributes.cameraPreset.trim() !== '') ? attributes.cameraPreset.trim() : 'default',
      options: [
        { label: __('Standard', 'pop3d-charts'), value: 'default' },
        { label: __('Low “frog” view, from bottom right', 'pop3d-charts'), value: 'frog_right' },
        { label: __('Slightly raised, from top right', 'pop3d-charts'), value: 'elevated_right' },
        { label: __('Front-facing 3D', 'pop3d-charts'), value: 'frontal' },
        { label: __('Slightly raised, from top left', 'pop3d-charts'), value: 'elevated_left' },
        { label: __('Low “frog” view, from bottom left', 'pop3d-charts'), value: 'frog_left' },
      ],
      onChange: (v) => setAttributes({ cameraPreset: v }),
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }),

    el(RangeControl, {
      label: __('Initial zoom', 'pop3d-charts'),
      help: __('Sets how close the chart appears on first load. Higher zooms in, lower zooms out. The 2D/3D toggle keeps the visitor’s current zoom.', 'pop3d-charts'),
      value: startZoomFactorToPercent(attributes.startZoom),
      min: 50,
      max: 200,
      step: 5,
      onChange: (v) => setAttributes({ startZoom: startZoomPercentToFactor(v) }),
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    })
  );
}
