/**
 * Panel "Background" — Hintergrundstil, Bodenverlauf, Transparenz und Hintergrundfarbe.
 *
 * Wurde aus AppearancePanel ausgegliedert, um den Reiter "Darstellung" zu entlasten.
 */
import { ColorSwatchPicker } from '../ColorSwatchPicker.js';

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

export function BackgroundPanel({ attributes, setAttributes, openState }) {
  return el(PanelBody, { title: __('Background', 'pop3d-charts'), ...(openState || {}) },
    el(ToggleControl, {
      label: __('Show background style', 'pop3d-charts'),
      checked: attributes.gridEnabled !== false,
      onChange: (v) => setAttributes({ gridEnabled: v }),
      __nextHasNoMarginBottom: true,
    }),
    attributes.gridEnabled !== false ? el(SelectControl, {
      label: __('Background style', 'pop3d-charts'),
      value: attributes.backgroundType || 'grid',
      options: [
        { label: __('Grid', 'pop3d-charts'), value: 'grid' },
        { label: __('Reflective ground', 'pop3d-charts'), value: 'gradient' },
      ],
      onChange: (v) => setAttributes({ backgroundType: v }),
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }) : null,
    attributes.gridEnabled !== false && attributes.backgroundType === 'grid' ? el(ColorSwatchPicker, {
      label: __('Grid line color', 'pop3d-charts'),
      id: 'ce-diagram-grid-color',
      color: attributes.gridLineColor || '#dcdcdc',
      onChange: (hex) => setAttributes({ gridLineColor: hex }),
    }) : null,
    attributes.gridEnabled !== false && attributes.backgroundType === 'gradient' ? el(ColorSwatchPicker, {
      label: __('Floor gradient color', 'pop3d-charts'),
      id: 'ce-diagram-gradient-floor',
      color: attributes.gradientFloorColor || '#c0c1c2',
      onChange: (hex) => setAttributes({ gradientFloorColor: hex }),
    }) : null,
    el(ToggleControl, {
      label: __('Transparent background', 'pop3d-charts'),
      checked: attributes.backgroundTransparent === true,
      onChange: (v) => setAttributes({ backgroundTransparent: v }),
      __nextHasNoMarginBottom: true,
    }),
    attributes.backgroundTransparent ? null : el(ColorSwatchPicker, {
      label: __('Background color', 'pop3d-charts'),
      id: 'ce-diagram-bg-color',
      color: attributes.backgroundColor || '#f8f9fa',
      onChange: (hex) => setAttributes({ backgroundColor: hex }),
    })
  );
}
