lcp-visualizer/blocks/components/LCPChartBlockSettings.js

import React, { useState, useEffect } from 'react';
import { Button, Icon, PanelBody, ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import LCPDimensionControl from './LCPDimensionControl';
import LCPHTMLModal from './LCPHTMLModal.js';

const LCPChartBlockSettings = ({ attributes, setAttributes }) => {
    // Use `legendAlignment` from props (block attributes)
    const { renderLegend,
        legendLocation,
        legendAlignment, 
        allowDownloadImage, 
        downloadImageMaxWidth,
        allowDownloadCsv,
        allowDownloadJson,
        allowSorting,
        allowFiltering,
        footerContent,
        chartTitle,
        chartSubtitle,
        toolbarLocation,
        toolbarAlignment
    } = attributes;

    // Set local state for legend location (for UI updates)
    const [selectedLegendLocation, setSelectedLegendLocation] = useState(legendLocation);

    // Update block attribute when location changes
    useEffect(() => {
        setAttributes({ legendLocation: selectedLegendLocation });
    }, [selectedLegendLocation, setAttributes]);

    // Set local state for alignment (for UI updates)
    const [selectedLegendAlignment, setSelectedLegendAlignment] = useState(legendAlignment);

    // Update block attribute when alignment changes
    useEffect(() => {
        setAttributes({ legendAlignment: selectedLegendAlignment });
    }, [selectedLegendAlignment, setAttributes]);

    // Set local state for alignment (for UI updates)
    const [selectedToolbarAlignment, setSelectedToolbarAlignment] = useState(toolbarAlignment);

    // Update block attribute when alignment changes
    useEffect(() => {
        setAttributes({ toolbarAlignment: selectedToolbarAlignment });
    }, [selectedToolbarAlignment, setAttributes]);


    // Render the component
    return (
        <div>
            {/* Legend Settings Panel */}
            <PanelBody title={__('Legend', 'lcp')} initialOpen={false}>
                <ToggleControl
                    label={__('Render Legend', 'lcp')}
                    checked={renderLegend}  
                    onChange={(value) => setAttributes({ renderLegend: value })} 
                />
                {renderLegend && (
                    <div>
                        {/* Legend - Alignment Buttons */}
                        <div>
                            {/* Left Alignment Button */}
                            <Button
                                isPrimary={selectedLegendAlignment === 'left'}
                                onClick={() => setSelectedLegendAlignment('left')}
                            >
                                {__('Left', 'lcp')}
                            </Button>

                            {/* Center Alignment Button */}
                            <Button
                                isPrimary={selectedLegendAlignment === 'center'}
                                onClick={() => setSelectedLegendAlignment('center')}
                            >
                                {__('Center', 'lcp')}
                            </Button>

                            {/* Right Alignment Button */}
                            <Button
                                isPrimary={selectedLegendAlignment === 'right'}
                                onClick={() => setSelectedLegendAlignment('right')}
                            >
                                {__('Right', 'lcp')}
                            </Button>
                        </div>

                        {/* Legend - Location Buttons */}
                        <div>
                            {/* Top Location Button */}
                            <Button
                                isPrimary={selectedLegendLocation === 'top'}
                                onClick={() => setSelectedLegendLocation('top')}
                            >
                                {__('Top', 'lcp')}
                            </Button>

                            {/* Bottom Location Button */}
                            <Button
                                isPrimary={selectedLegendLocation === 'bottom'}
                                onClick={() => setSelectedLegendLocation('bottom')}
                            >
                                {__('Bottom', 'lcp')}
                            </Button>
                        </div>
                    </div>
                )}

            
            </PanelBody>

            {/* Controls Settings Panel */}
            <PanelBody title={__('Controls', 'lcp')} initialOpen={false}>
                <div>
                    {/* Left Alignment Button */}
                    <Button
                        isPrimary={selectedToolbarAlignment === 'left'}
                        onClick={() => setSelectedToolbarAlignment('left')}
                    >
                        
                        {__('Left', 'lcp')}
                    </Button>

                    {/* Center Alignment Button */}
                    <Button
                        isPrimary={selectedToolbarAlignment === 'center'}
                        onClick={() => setSelectedToolbarAlignment('center')}
                    >
                        {__('Center', 'lcp')}
                    </Button>

                    {/* Right Alignment Button */}
                    <Button
                        isPrimary={selectedToolbarAlignment === 'right'}
                        onClick={() => setSelectedToolbarAlignment('right')}
                    >
                        {__('Right', 'lcp')}
                    </Button>
                </div>
                <ToggleControl
                    label={__('Allow Filtering', 'lcp')}
                    checked={allowFiltering}  
                    onChange={(value) => setAttributes({ allowFiltering: value })} 
                />
                <ToggleControl
                    label={__('Allow Sorting', 'lcp')}
                    checked={allowSorting}  
                    onChange={(value) => setAttributes({ allowSorting: value })} 
                />
                <ToggleControl
                    label={__('Allow Download Image', 'lcp')}
                    checked={allowDownloadImage}  
                    onChange={(value) => setAttributes({ allowDownloadImage: value })} 
                />
                {allowDownloadImage && (
                    <LCPDimensionControl
                        unitTypes={['px']}
                        label={__('Download Image Max Width', 'lcp')}
                        value={downloadImageMaxWidth}
                        onChange={(value) => setAttributes({ downloadImageMaxWidth: value })}
                    />
                )}
                <ToggleControl
                    label={__('Allow Download CSV', 'lcp')}
                    checked={allowDownloadCsv}  
                    onChange={(value) => setAttributes({ allowDownloadCsv: value })} 
                />
                <ToggleControl
                    label={__('Allow Download JSON', 'lcp')}
                    checked={allowDownloadJson}  
                    onChange={(value) => setAttributes({ allowDownloadJson: value })} 
                />
            </PanelBody>
            {/* Tooltips and Popups Panel */}
            <PanelBody title={__('Tooltips and Popups', 'lcp')} initialOpen={false}>
                <LCPHTMLModal />
            </PanelBody>
            {/* Header  Settings Panel */}
            <PanelBody title={__('Header', 'lcp')} initialOpen={false}>
                
            </PanelBody>
            {/* Footer Settings Panel */}
            <PanelBody title={__('Footer', 'lcp')} initialOpen={false}>
                <LCPHTMLModal />
            </PanelBody>
        </div>
    );
};

export default LCPChartBlockSettings;