/**
 * Panel "Sorting" — Sortierreihenfolge und optionales Viewer-Sort-Dropdown.
 * Notice-Hints hängen vom gewählten Layout ab.
 */
import { cePdEditorExt } from '../editorExt.js';

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

export function SortingPanel({ attributes, setAttributes, layout, openState }) {
  /* Surface (Pro): positionsbasiertes Raster — Panel ausblenden. */
  if (cePdEditorExt.layoutDisablesSorting(layout)) return null;
  return el(PanelBody, { title: __('Sorting', 'pop3d-charts'), ...(openState || {}) },
    layout === 'stacked'
      ? el(Notice, { status: 'info', isDismissible: false },
          __('Stacked columns: value-based sorts order X-axis groups by the sum of values in each group; segments inside a group keep your data table order (bottom to top). Label A–Z sorts groups by X group name and rows within each group by label.', 'pop3d-charts'))
      : null,
    el(SelectControl, {
      label: __('Sort order', 'pop3d-charts'),
      value: attributes.sortOrder || 'custom',
      options: [
        { label: __('Custom (manual)', 'pop3d-charts'), value: 'custom' },
        { label: __('Value ascending', 'pop3d-charts'), value: 'value_asc' },
        { label: __('Value descending', 'pop3d-charts'), value: 'value_desc' },
        { label: __('Label A–Z', 'pop3d-charts'), value: 'headline_asc' },
      ],
      onChange: (v) => setAttributes({ sortOrder: v }),
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }),
    el(ToggleControl, {
      label: __('Let visitors change sort order', 'pop3d-charts'),
      help: __('Shows a sort control above the chart. The chart starts with the sort order you set above.', 'pop3d-charts'),
      checked: attributes.viewerSortEnabled === true,
      onChange: (v) => setAttributes({ viewerSortEnabled: v }),
      __nextHasNoMarginBottom: true,
    })
  );
}
