/**
 * Panel "Title & footnote" — Titel, Untertitel, Fußnote und Ausrichtung.
 */
import { ColorSwatchPicker } from '../ColorSwatchPicker.js';

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

export function TitleFootnotePanel({ attributes, setAttributes, openState }) {
  const headerTextCustom = typeof attributes.headerTextColor === 'string' && attributes.headerTextColor.trim() !== '';
  return el(PanelBody, { title: __('Title & footnote', 'pop3d-charts'), ...(openState || {}) },
    el(TextControl, {
      label: __('Chart title', 'pop3d-charts'),
      value: attributes.chartTitle || '',
      onChange: (v) => setAttributes({ chartTitle: v }),
      placeholder: __('e.g. Revenue by channel', 'pop3d-charts'),
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }),
    el(TextControl, {
      label: __('Chart subtitle', 'pop3d-charts'),
      value: attributes.chartSubtitle || '',
      onChange: (v) => setAttributes({ chartSubtitle: v }),
      placeholder: __('e.g. Fiscal year 2025', 'pop3d-charts'),
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }),
    el(TextControl, {
      label: __('Footnote', 'pop3d-charts'),
      value: attributes.chartFootnote || '',
      onChange: (v) => setAttributes({ chartFootnote: v }),
      placeholder: __('e.g. Source: Annual report 2025', 'pop3d-charts'),
      help: __('Small text below the chart, e.g. data source or disclaimer.', 'pop3d-charts'),
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }),
    el(SelectControl, {
      label: __('Text alignment', 'pop3d-charts'),
      value: attributes.headerAlign || 'left',
      options: [
        { label: __('Left', 'pop3d-charts'), value: 'left' },
        { label: __('Center', 'pop3d-charts'), value: 'center' },
        { label: __('Right', 'pop3d-charts'), value: 'right' },
      ],
      onChange: (v) => setAttributes({ headerAlign: v }),
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }),
    el(ColorSwatchPicker, {
      label: __('Title and footnote text color', 'pop3d-charts'),
      id: 'ce-diagram-header-text-color',
      help: __('Leave empty for black or white from the block background. Set a color if the background is transparent.', 'pop3d-charts'),
      color: headerTextCustom ? attributes.headerTextColor.trim() : '#000000',
      isEmpty: !headerTextCustom,
      onChange: (hex) => setAttributes({ headerTextColor: hex || '' }),
      defaultButton: headerTextCustom
        ? el(Button, { isSmall: true, variant: 'secondary', onClick: () => setAttributes({ headerTextColor: '' }) }, __('Automatic contrast', 'pop3d-charts'))
        : null,
    })
  );
}
