/**
 * Pyramid layout — Appearance panel section (Free), wie waveAppearance.js.
 * Registriert sich in AppearancePanel über cePdEditorExt.registerPanelSection('appearance').
 */
import { PYRAMID_SLICE_LABEL_VALUES } from '../constants.js';
import { cePdEditorExt } from '../editorExt.js';
import {
  resolvePyramidSliceLabelMode,
  resolvePyramidSegmentGap,
  resolvePyramidAnnotation,
  resolvePyramidAnnotationLineLength,
  resolvePyramidAnnotationFontScale,
} from '../../shared/config.js';

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

function pyramidSliceLabelOptions() {
  const labels = {
    off: __('Aus', 'pop3d-charts'),
    value: __('Wert und Einheit', 'pop3d-charts'),
    headline: __('Beschriftung', 'pop3d-charts'),
  };
  return PYRAMID_SLICE_LABEL_VALUES.map((value) => ({
    label: labels[value] || value,
    value,
  }));
}

export function PyramidSection({ attributes, setAttributes }) {
  const sliceLabelMode = resolvePyramidSliceLabelMode(attributes);
  const showLabelContrast = sliceLabelMode !== 'off';
  const showAnnotationControls = resolvePyramidAnnotation(attributes);

  return el(Fragment, null,
    el(RangeControl, {
      key: 'pyramidSegmentGap',
      label: __('Gap between segments', 'pop3d-charts'),
      help: __('Vertical spacing between pyramid segments. 0 = segments touch.', 'pop3d-charts'),
      value: resolvePyramidSegmentGap(attributes),
      onChange: (v) => setAttributes({ pyramidSegmentGap: v }),
      min: 0, max: 0.08, step: 0.005,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }),
    el(ToggleControl, {
      key: 'pyramidInverted',
      label: __('Inverted pyramid', 'pop3d-charts'),
      help: __('When enabled, the pyramid stands on its head.', 'pop3d-charts'),
      checked: attributes.pyramidInverted === true,
      onChange: (v) => setAttributes({ pyramidInverted: v }),
      __nextHasNoMarginBottom: true,
    }),
    el(SelectControl, {
      key: 'pyramidSliceLabel',
      label: __('Labels inside segments', 'pop3d-charts'),
      help: __('Text drawn on each segment when there is enough space. Very short segments stay empty.', 'pop3d-charts'),
      value: sliceLabelMode,
      options: pyramidSliceLabelOptions(),
      onChange: (v) => setAttributes({ pyramidSliceLabel: v }),
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }),
    showLabelContrast ? el(ToggleControl, {
      key: 'pyramidLabelAutoContrast',
      label: __('Automatic contrast for segment text', 'pop3d-charts'),
      checked: attributes.pyramidLabelAutoContrast !== false,
      onChange: (v) => setAttributes({ pyramidLabelAutoContrast: v }),
      __nextHasNoMarginBottom: true,
    }) : null,
    el(ToggleControl, {
      key: 'pyramidAnnotation',
      label: __('Anmerkung (aus Diagrammdaten)', 'pop3d-charts'),
      help: __('Shows headline, description, and source per segment, alternating left and right.', 'pop3d-charts'),
      checked: resolvePyramidAnnotation(attributes),
      onChange: (v) => setAttributes({
        pyramidAnnotation: v,
        pyramidAnnotationLeft: false,
        pyramidAnnotationRight: false,
      }),
      __nextHasNoMarginBottom: true,
    }),
    showAnnotationControls ? el(Fragment, { key: 'pyramidAnnotationStyle' },
      el(RangeControl, {
        key: 'pyramidAnnotationLineLength',
        label: __('Annotation line length', 'pop3d-charts'),
        help: __('Length of the leader line from the pyramid to the annotation text.', 'pop3d-charts'),
        value: resolvePyramidAnnotationLineLength(attributes),
        onChange: (v) => setAttributes({ pyramidAnnotationLineLength: v }),
        min: 0.1, max: 0.6, step: 0.05,
        __nextHasNoMarginBottom: true,
        __next40pxDefaultSize: true,
      }),
      el(RangeControl, {
        key: 'pyramidAnnotationFontScale',
        label: __('Annotation font scale', 'pop3d-charts'),
        help: __('Scale factor for side annotation text (1 = default).', 'pop3d-charts'),
        value: resolvePyramidAnnotationFontScale(attributes),
        onChange: (v) => setAttributes({ pyramidAnnotationFontScale: v }),
        min: 0.5, max: 2, step: 0.1,
        __nextHasNoMarginBottom: true,
        __next40pxDefaultSize: true,
      })
    ) : null
  );
}

cePdEditorExt.registerPanelSection('appearance', {
  layouts: ['pyramid'],
  render: ({ attributes, setAttributes }) => el(PyramidSection, {
    key: 'pyramidSection',
    attributes,
    setAttributes,
  }),
});
