/**
 * Panel "Appearance" — Hintergrund, Farbschema, Lineal, Diagramm-Höhe,
 * Balken-Form, und alle layout-spezifischen Daten-Label-Optionen für die
 * Standard-Layouts (straight, stacked, pie).
 *
 * Add-on-Plugins koennen zusätzliche InspectorControls über
 * `addFilter('editor.BlockEdit', HOC)` und über die Editor-Registries in
 * `editorExt.js` einhaengen.
 */
import { ColorSwatchPicker } from '../ColorSwatchPicker.js';
import { normalizeRulerStyle } from '../../scene/ruler.js';
import {
  RULER_LAYOUTS,
  CREATE_RULER_LAYOUTS,
  BAR_LAYOUTS,
  ENABLE_DIAGRAM_MAX_HEIGHT,
  isPieLayout,
} from '../constants.js';
import {
  mergeDiagramMaxHByBp,
  getColorSchemeOptions,
  getStraightBarLabelSlots,
  getStackedBarSumAbove,
  getPieSliceLabel,
} from '../attributeHelpers.js';
import { resolvePieCalloutLineLength, resolvePieCalloutFontScale, resolvePieAngleBasis } from '../../shared/config.js';
import { cePdEditorExt } from '../editorExt.js';

const { createElement: el, Fragment, useState } = wp.element;
const { __ } = wp.i18n;
const {
  PanelBody,
  ToggleControl,
  SelectControl,
  BaseControl,
  TextControl,
  RangeControl,
  Button,
} = wp.components;

export function AppearancePanel({ attributes, setAttributes, layout, openState }) {
  const [maxHeightScope, setMaxHeightScope] = useState('desktop');
  /* Aufrechtes Pie/Donut und liegendes Stairs-Donut teilen sich dieselben
   * Slice-/Callout-/Innenradius-Optionen. */
  const isPie = isPieLayout(layout);
  const isPyramid = layout === 'pyramid';

  /* Free deckt straight/stacked über die Konstanten ab, Pro-Layouts (arc, grouped,
   * horizontal, wave, surface) melden sich über `layoutHasRuler` / `layoutHasRulerStyle`. */
  const showRuler = RULER_LAYOUTS.includes(layout) || cePdEditorExt.layoutHasRuler(layout);
  const showRulerStyleSelect = showRuler && attributes.rulerEnabled !== false
    && (CREATE_RULER_LAYOUTS.includes(layout) || cePdEditorExt.layoutHasRulerStyle(layout));
  /* Free deckt straight/stacked über BAR_LAYOUTS ab; Pro-Bar-Layouts
   * (arc/grouped/horizontal) melden sich über `layoutHasBarThickness`. */
  const showBarThickness = BAR_LAYOUTS.includes(layout) || cePdEditorExt.layoutHasBarThickness(layout);
  /* "Bar opacity" gilt fuer alle Balken-Layouts MIT Dicke plus zusaetzliche
   * Layouts, die nur Transparenz unterstuetzen (radial → fixe Ringbreiten). */
  const showBarOpacity = showBarThickness || cePdEditorExt.layoutHasBarOpacity(layout);
  const showXAxisCategoryLabels = layout === 'straight' || layout === 'stacked';
  /* Layout-Capabilities (Standard-Default + Add-on-Overrides via editorExt). */
  const hidesDataColors      = cePdEditorExt.layoutHidesDataColors(layout);
  const hidesAlwaysColorful  = cePdEditorExt.layoutHidesAlwaysColorful(layout);
  /* Bewusst nicht an `showRuler` koppeln: Surface besitzt einen Ruler, hat aber
   * keine Daten-Captions, die der Slider skalieren könnte. Free-Layouts laufen
   * weiterhin über RULER_LAYOUTS, Pro-Layouts über `layoutShowsDataLabelFontScale`. */
  const showDataLabelFontScale =
    ((RULER_LAYOUTS.includes(layout) && attributes.rulerEnabled !== false) || isPie)
    || cePdEditorExt.layoutShowsDataLabelFontScale(layout);
  /* Add-on-Sections werden hier am Ende der Standard-Controls eingehaengt. */
  const extAppearanceSections = cePdEditorExt.renderPanelSections('appearance', { attributes, setAttributes, layout });
  const extAppearanceAfterColors = cePdEditorExt.renderPanelSections('appearanceAfterColors', { attributes, setAttributes, layout });
  /* Slot ganz oben im Panel (vor "Data colors") fuer layout-spezifische
   * Stil-Auswahl (z. B. Wave-Stil). */
  const extAppearanceTop = cePdEditorExt.renderPanelSections('appearanceTop', { attributes, setAttributes, layout });

  const maxHMerged = mergeDiagramMaxHByBp(attributes.diagramMaxHeightByBreakpoint);
  const updateMaxHBreakpoint = (bp, patch) => {
    const base = mergeDiagramMaxHByBp(attributes.diagramMaxHeightByBreakpoint);
    base[bp] = { ...base[bp], ...patch };
    setAttributes({ diagramMaxHeightByBreakpoint: base });
  };
  const maxHPlaceholders = { desktop: '720', tablet: '600', mobile: '480' };

  return el(PanelBody, { title: __('Appearance', 'pop3d-charts'), ...(openState || {}) },
    /* Slot ganz oben: Stil-Auswahl noch vor "Data colors". */
    ...extAppearanceTop,
    hidesDataColors ? null : el(SelectControl, {
      label: __('Data colors', 'pop3d-charts'),
      value: attributes.colorScheme || 'vivid',
      options: getColorSchemeOptions(),
      onChange: (v) => setAttributes({ colorScheme: v }),
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }),
    /* Direkt unter dem Farbschema: per-Balken-Farben aus den Diagramm-Daten
     * uebersteuern, ohne sie dort einzeln loeschen zu muessen. Die Farben
     * bleiben gespeichert und kehren beim Ausschalten zurueck. */
    hidesDataColors ? null : el(ToggleControl, {
      label: __('Ignore custom bar colors', 'pop3d-charts'),
      help: __('Ignores the per-bar colors set in the Chart data tab and uses the color scheme above. Your saved colors are kept and return when you switch this off.', 'pop3d-charts'),
      checked: attributes.ignoreBarColors === true,
      onChange: (v) => setAttributes({ ignoreBarColors: v }),
      __nextHasNoMarginBottom: true,
    }),
    /* Direkt unter dem Farbschema-Dropdown: 3-Farb-Verlauf pro Balken (nur Balken-Layouts). */
    showBarThickness ? el(ToggleControl, {
      label: __('Crazy color mix', 'pop3d-charts'),
      help: __('Fills each bar with a 3-stop gradient from the active palette. Disables per-bar solid colors.', 'pop3d-charts'),
      checked: attributes.barGradientEnabled === true,
      onChange: (v) => setAttributes({ barGradientEnabled: v }),
      __nextHasNoMarginBottom: true,
    }) : null,
    /* Slot direkt nach "Data colors" fuer Add-on-Controls. */
    ...extAppearanceAfterColors,

    /* "Always colorful" hat im Verlaufsmodus keine Wirkung (instanceColor bleibt weiss),
     * daher dort ausblenden, statt einen wirkungslosen Toggle zu zeigen. */
    (hidesAlwaysColorful || attributes.barGradientEnabled === true) ? null : el(ToggleControl, {
      label: __('Always colorful (no graying)', 'pop3d-charts'),
      checked: attributes.alwaysColorful === true,
      onChange: (v) => setAttributes({ alwaysColorful: v }),
      __nextHasNoMarginBottom: true,
    }),

    showRuler ? el(ToggleControl, {
      label: __('Show ruler', 'pop3d-charts'),
      checked: attributes.rulerEnabled !== false,
      onChange: (v) => setAttributes({ rulerEnabled: v }),
      __nextHasNoMarginBottom: true,
    }) : null,
    showRuler && attributes.rulerEnabled !== false ? el(ColorSwatchPicker, {
      label: __('Ruler color', 'pop3d-charts'),
      id: 'ce-diagram-ruler-color',
      color: attributes.rulerColor || '#858585',
      onChange: (hex) => setAttributes({ rulerColor: hex || '#858585' }),
    }) : null,
    showRulerStyleSelect ? el(SelectControl, {
      label: __('Ruler style', 'pop3d-charts'),
      value: normalizeRulerStyle(attributes.rulerStyle),
      options: [
        { label: __('Default', 'pop3d-charts'), value: 'default' },
        { label: __('Soft / Modern', 'pop3d-charts'), value: 'softModern' },
        { label: __('Point grid', 'pop3d-charts'), value: 'dotGrid' },
        { label: __('Tick stripes', 'pop3d-charts'), value: 'tickBands' },
        { label: __('Bands only', 'pop3d-charts'), value: 'stripeOnly' },
        { label: __('Caliper', 'pop3d-charts'), value: 'caliper' },
        { label: __('Gradient', 'pop3d-charts'), value: 'gradient' },
      ],
      onChange: (v) => setAttributes({ rulerStyle: normalizeRulerStyle(v) }),
      __next40pxDefaultSize: true,
      __nextHasNoMarginBottom: true,
    }) : null,

    el(ToggleControl, {
      label: __('Scroll, zoom, pan, rotate', 'pop3d-charts'),
      checked: attributes.interactionEnabled !== false,
      onChange: (v) => setAttributes({ interactionEnabled: v }),
      __nextHasNoMarginBottom: true,
    }),

    ENABLE_DIAGRAM_MAX_HEIGHT && el(BaseControl, {
      label: __('Diagram height', 'pop3d-charts'),
      help: __('Sets a fixed height per breakpoint. Leave empty for automatic height. Percent refers to viewport height.', 'pop3d-charts'),
      id: 'ce-diagram-max-height-responsive',
      __nextHasNoMarginBottom: true,
    },
      el('div', { className: 'ce-diagram-maxh-scope', role: 'tablist', 'aria-label': __('Screen size', 'pop3d-charts') },
        ['desktop', 'tablet', 'mobile'].map((bp) => el('button', {
          key: bp,
          type: 'button',
          role: 'tab',
          'aria-selected': maxHeightScope === bp,
          className: 'ce-diagram-maxh-tab' + (maxHeightScope === bp ? ' is-active' : ''),
          onClick: () => setMaxHeightScope(bp),
        }, bp === 'desktop' ? __('Desktop', 'pop3d-charts')
          : bp === 'tablet' ? __('Tablet', 'pop3d-charts')
          : __('Mobile', 'pop3d-charts')))
      ),
      el('div', { className: 'ce-diagram-maxh-fields', style: { display: 'flex', gap: '10px', alignItems: 'flex-end', flexWrap: 'wrap' } },
        el('div', { style: { flex: '1 1 120px', minWidth: '100px' } },
          el(TextControl, {
            label: __('Value', 'pop3d-charts'),
            type: 'text',
            inputMode: 'decimal',
            value: maxHMerged[maxHeightScope].value,
            placeholder: maxHPlaceholders[maxHeightScope],
            onChange: (v) => {
              const t = String(v || '').replace(/[^\d.]/g, '');
              const parts = t.split('.');
              const cleaned = parts.length > 1 ? parts[0] + '.' + parts.slice(1).join('').slice(0, 4) : parts[0];
              updateMaxHBreakpoint(maxHeightScope, { value: cleaned });
            },
            __nextHasNoMarginBottom: true,
            __next40pxDefaultSize: true,
          })
        ),
        el('div', { style: { flex: '0 0 100px' } },
          el(SelectControl, {
            label: __('Unit', 'pop3d-charts'),
            value: maxHMerged[maxHeightScope].unit,
            options: [
              { label: 'px', value: 'px' },
              { label: 'em', value: 'em' },
              { label: '%', value: '%' },
            ],
            onChange: (u) => updateMaxHBreakpoint(maxHeightScope, { unit: u }),
            __nextHasNoMarginBottom: true,
            __next40pxDefaultSize: true,
          })
        )
      )
    ),

    showXAxisCategoryLabels ? renderXAxisCategoryControls({ attributes, setAttributes, layout }) : null,

    layout === 'stacked' ? el(ToggleControl, {
      label: __('Show sum above each stack', 'pop3d-charts'),
      checked: getStackedBarSumAbove(attributes),
      onChange: (v) => setAttributes({ stackedBarSumAbove: v }),
      __nextHasNoMarginBottom: true,
    }) : null,
    isPie ? el(SelectControl, {
      label: __('Labels inside pie slices', 'pop3d-charts'),
      help: __('Text drawn on each slice when there is enough space. Very narrow slices stay empty.', 'pop3d-charts'),
      value: getPieSliceLabel(attributes),
      options: [
        { label: __('Off', 'pop3d-charts'), value: 'off' },
        { label: __('Value + unit', 'pop3d-charts'), value: 'value' },
        { label: __('Label', 'pop3d-charts'), value: 'headline' },
        { label: __('Value + unit inside, label with leader line', 'pop3d-charts'), value: 'value_callout' },
      ],
      onChange: (v) => setAttributes({ pieSliceLabel: v }),
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }) : null,
    isPie && getPieSliceLabel(attributes) === 'value_callout' ? el(RangeControl, {
      label: __('Pie callout line length', 'pop3d-charts'),
      value: resolvePieCalloutLineLength({ pieCalloutLineLength: attributes.pieCalloutLineLength }),
      onChange: (v) => setAttributes({ pieCalloutLineLength: v }),
      min: 0.1, max: 0.6, step: 0.05,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }) : null,
    isPie && getPieSliceLabel(attributes) === 'value_callout' ? el(RangeControl, {
      label: __('Pie callout label size', 'pop3d-charts'),
      value: resolvePieCalloutFontScale({ pieCalloutFontScale: attributes.pieCalloutFontScale }),
      onChange: (v) => setAttributes({ pieCalloutFontScale: v }),
      min: 0.3, max: 3, step: 0.05,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }) : null,
    isPie && getPieSliceLabel(attributes) === 'value_callout' ? el(ColorSwatchPicker, {
      label: __('Pie callout color', 'pop3d-charts'),
      id: 'ce-diagram-pie-callout-color',
      help: __('Leave empty for automatic black or white from the chart background.', 'pop3d-charts'),
      color: (typeof attributes.pieCalloutColor === 'string' && attributes.pieCalloutColor.trim() !== '') ? attributes.pieCalloutColor.trim() : '#333333',
      isEmpty: !(typeof attributes.pieCalloutColor === 'string' && attributes.pieCalloutColor.trim() !== ''),
      onChange: (hex) => setAttributes({ pieCalloutColor: hex || '' }),
      defaultButton: (typeof attributes.pieCalloutColor === 'string' && attributes.pieCalloutColor.trim() !== '')
        ? el(Button, { isSmall: true, variant: 'secondary', onClick: () => setAttributes({ pieCalloutColor: '' }) }, __('Automatic contrast', 'pop3d-charts'))
        : null,
    }) : null,
    isPie && getPieSliceLabel(attributes) !== 'off' ? el(ToggleControl, {
      label: __('Automatic contrast for slice text', 'pop3d-charts'),
      checked: attributes.pieLabelAutoContrast !== false,
      onChange: (v) => setAttributes({ pieLabelAutoContrast: v }),
      __nextHasNoMarginBottom: true,
    }) : null,
    isPie ? el(SelectControl, {
      label: __('Pie slice angles', 'pop3d-charts'),
      value: resolvePieAngleBasis(attributes),
      options: [
        { label: __('Share of data total (fill ring)', 'pop3d-charts'), value: 'sum' },
        { label: __('Shares of 100% (gap if sum under 100)', 'pop3d-charts'), value: 'hundred' },
      ],
      onChange: (v) => setAttributes({ pieAngleBasis: v }),
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }) : null,
    isPie ? el(RangeControl, {
      label: __('Inner radius (hole size)', 'pop3d-charts'),
      help: __('0 = solid pie, higher = larger donut hole.', 'pop3d-charts'),
      value: typeof attributes.pieInnerRadius === 'number' ? attributes.pieInnerRadius : 0.5,
      onChange: (v) => setAttributes({ pieInnerRadius: v }),
      min: 0, max: 0.85, step: 0.05,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }) : null,
    isPie ? el(RangeControl, {
      label: __('Slice thickness', 'pop3d-charts'),
      help: __('Depth (3D thickness) of the slices. Higher = chunkier slices, useful when many segments look thin.', 'pop3d-charts'),
      value: typeof attributes.pieThickness === 'number' ? attributes.pieThickness : 1,
      onChange: (v) => setAttributes({ pieThickness: v }),
      min: 0.5, max: 5, step: 0.25,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }) : null,
    layout === 'pieStairs' ? el(RangeControl, {
      label: __('Stair step height', 'pop3d-charts'),
      help: __('Height added per segment so the slices form a staircase. 0 = flat ring.', 'pop3d-charts'),
      value: typeof attributes.stairStepHeight === 'number' ? attributes.stairStepHeight : 0.18,
      onChange: (v) => setAttributes({ stairStepHeight: v }),
      min: 0, max: 0.8, step: 0.02,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }) : null,

    showBarThickness ? el(RangeControl, {
      label: __('Bar thickness', 'pop3d-charts'),
      help: __('Adjusts bar width in the scene; depth stays the same. Very thick bars may overlap.', 'pop3d-charts'),
      value: typeof attributes.barThicknessScale === 'number' ? attributes.barThicknessScale : 1,
      onChange: (v) => setAttributes({ barThicknessScale: v }),
      min: 0.4, max: 1.7, step: 0.05,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }) : null,
    showBarOpacity ? el(RangeControl, {
      label: __('Bar opacity', 'pop3d-charts'),
      help: __('Adjusts bar transparency. 1 = fully opaque (default), lower values let the scene show through.', 'pop3d-charts'),
      value: typeof attributes.barOpacity === 'number' ? attributes.barOpacity : 1,
      onChange: (v) => setAttributes({ barOpacity: v }),
      min: 0.1, max: 1, step: 0.05,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }) : null,
    showBarThickness && layout !== 'stacked' ? el(RangeControl, {
      label: __('Bar corner radius', 'pop3d-charts'),
      help: __('0 = sharp edges, 1 = fully rounded (default). Stacked bars are always sharp.', 'pop3d-charts'),
      value: typeof attributes.barCornerRadius === 'number' ? attributes.barCornerRadius : 1,
      onChange: (v) => setAttributes({ barCornerRadius: v }),
      min: 0, max: 1, step: 0.1,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }) : null,
    showDataLabelFontScale ? el(RangeControl, {
      label: isPie ? __('Pie slice label size', 'pop3d-charts') : (isPyramid ? __('Segment label size', 'pop3d-charts') : __('Data caption font size', 'pop3d-charts')),
      help: isPie
        ? __('Scales text inside pie slices when slice labels are enabled. Axis and legend are unchanged.', 'pop3d-charts')
        : (isPyramid
          ? __('Scales text inside pyramid segments when segment labels are enabled. Axis and legend are unchanged.', 'pop3d-charts')
          : __('Scales labels above/below bars. Axis titles and tick numbers stay unchanged.', 'pop3d-charts')),
      value: typeof attributes.dataLabelFontScale === 'number' ? attributes.dataLabelFontScale : 1,
      onChange: (v) => setAttributes({ dataLabelFontScale: v }),
      min: 0.5,
      max: (isPie || isPyramid) ? 3 : 1.6,
      step: 0.05,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }) : null,

    /* Slot am Ende des Panels fuer Add-on-Sections (Layout-spezifische Controls). */
    ...extAppearanceSections
  );
}

/**
 * Layout-spezifische X-Achsen-Label-Optionen für die Layouts straight + stacked.
 * Inkl. Farb-Picker fuer Bar-/Group-Label direkt unter den jeweiligen Caption-Optionen.
 */
function renderXAxisCategoryControls({ attributes, setAttributes, layout }) {
  const rulerOn = attributes.rulerEnabled !== false;
  const barLabelColorPicker = el(ColorSwatchPicker, {
    label: __('Bar label color', 'pop3d-charts'),
    id: 'ce-diagram-bar-label-color',
    color: (typeof attributes.barLabelColor === 'string' && attributes.barLabelColor.trim() !== '') ? attributes.barLabelColor.trim() : (attributes.rulerColor || '#858585'),
    onChange: (hex) => setAttributes({ barLabelColor: hex || (attributes.rulerColor || '#858585') }),
  });
  const groupLabelColorPicker = el(ColorSwatchPicker, {
    label: __('Group label color', 'pop3d-charts'),
    id: 'ce-diagram-group-label-color',
    color: (typeof attributes.groupLabelColor === 'string' && attributes.groupLabelColor.trim() !== '') ? attributes.groupLabelColor.trim() : (attributes.rulerColor || '#858585'),
    onChange: (hex) => setAttributes({ groupLabelColor: hex || (attributes.rulerColor || '#858585') }),
  });

  if (layout === 'straight') {
    const slots = getStraightBarLabelSlots(attributes);
    /* straight: barLabelColor faerbt die Caption ueber den Balken, groupLabelColor
     * die Boden-Caption unter den Balken. Picker nur zeigen, wenn der jeweilige
     * Slot eine Beschriftung rendert (und der Ruler aktiv ist). */
    const showAboveColor = rulerOn && slots.above !== 'off';
    const showBelowColor = rulerOn && slots.below !== 'off';
    const writeSlots = (nextAbove, nextBelow) => setAttributes({
      straightBarLabelAbove: nextAbove,
      straightBarLabelBelow: nextBelow,
      labelsUnderBars: nextBelow === 'headline',
    });
    return el(Fragment, {},
      el(SelectControl, {
        label: __('Caption above bars', 'pop3d-charts'),
        value: slots.above,
        options: [
          { label: __('Off', 'pop3d-charts'), value: 'off' },
          { label: __('Value + unit', 'pop3d-charts'), value: 'value', disabled: slots.below === 'value' },
          { label: __('Label', 'pop3d-charts'), value: 'headline', disabled: slots.below === 'headline' },
        ],
        onChange: (v) => {
          let nextAbove = v; let nextBelow = slots.below;
          if (nextAbove === nextBelow && nextAbove !== 'off') nextBelow = 'off';
          writeSlots(nextAbove, nextBelow);
        },
        __nextHasNoMarginBottom: true,
        __next40pxDefaultSize: true,
      }),
      showAboveColor ? barLabelColorPicker : null,
      el(SelectControl, {
        label: __('Caption below bars', 'pop3d-charts'),
        value: slots.below,
        options: [
          { label: __('Off', 'pop3d-charts'), value: 'off' },
          { label: __('Value + unit', 'pop3d-charts'), value: 'value', disabled: slots.above === 'value' },
          { label: __('Label', 'pop3d-charts'), value: 'headline', disabled: slots.above === 'headline' },
        ],
        onChange: (v) => {
          let nextBelow = v; let nextAbove = slots.above;
          if (nextAbove === nextBelow && nextBelow !== 'off') nextAbove = 'off';
          writeSlots(nextAbove, nextBelow);
        },
        __nextHasNoMarginBottom: true,
        __next40pxDefaultSize: true,
      }),
      showBelowColor ? groupLabelColorPicker : null
    );
  }
  // stacked: kein Above/Below-Select – Farben hinter den jeweiligen Label-Schaltern.
  /* stacked: groupLabelColor faerbt die X-Kategorie-Labels (labelsUnderBars),
   * barLabelColor die Summen-Labels ueber den Stapeln (stackedBarSumAbove).
   * Picker jeweils nur zeigen, wenn die zugehoerige Beschriftung aktiv ist. */
  const showCategoryColor = rulerOn && attributes.labelsUnderBars === true;
  const showSumColor = rulerOn && getStackedBarSumAbove(attributes) === true;
  return el(Fragment, {},
    el(ToggleControl, {
      label: __('X-axis category labels (45°, same as Straight)', 'pop3d-charts'),
      checked: attributes.labelsUnderBars === true,
      onChange: (v) => setAttributes({ labelsUnderBars: v }),
      __nextHasNoMarginBottom: true,
    }),
    showCategoryColor ? groupLabelColorPicker : null,
    showSumColor ? barLabelColorPicker : null
  );
}
