lcp-visualizer/blocks/components/LCPChartBlockSettings.js

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

const LCPChartBlockSettings = ({ attributes, setAttributes }) => {
    // Attributes from parent edit.js file
    const { renderLegend,
        legendLocation,
        legendAlignment, 
        allowDownloadImage, 
        downloadImageMaxWidth,
        allowDownloadCsv,
        allowDownloadJson,
        allowSorting,
        allowFiltering,
        footerContent,
        chartTitle,
        chartSubtitle,
        toolbarLocation = 'top',
        toolbarAlignment,
        showXAxisLabel,
        xAxisLabel,
        showYAxisLabel,
        yAxisLabel,
        renderXGrid,
        renderYGrid,
        xGridColor,
        yGridColor,
        legendFontSize,
        includeDataChart,
        allowChartDataDownload
    } = attributes;

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

    // Update block attributes when location or alignment changes
    useEffect(() => {
        setAttributes({ legendLocation: selectedLegendLocation, legendAlignment: selectedLegendAlignment });
    }, [selectedLegendLocation, selectedLegendAlignment, setAttributes]);

    // Set local state for toolbar location and alignment (for UI updates)
    const [selectedToolbarLocation, setSelectedToolbarLocation] = useState(toolbarLocation);
    const [selectedToolbarAlignment, setSelectedToolbarAlignment] = useState(toolbarAlignment);

    // Update block attributes when toolbar location or alignment changes
    useEffect(() => {
        setAttributes({ toolbarLocation: selectedToolbarLocation, toolbarAlignment: selectedToolbarAlignment });
    }, [selectedToolbarLocation, selectedToolbarAlignment, setAttributes]);


    // Render the component
    return (
        <div>
            {/* Front-end Chart Settings */}
            <PanelBody title={__('Grid', 'lcp')} initialOpen={false}>
                {/* Render the chart on the front-end */}
                <ToggleControl 
                    label={__('Include Data Chart', 'lcp')}
                    checked={includeDataChart} 
                    onChange={(value) => 
                    setAttributes({ includeDataChart: value })} 
                />
                {/* Allow chart data download */}
                <ToggleControl 
                    label={__('Allow Chart Data Download', 'lcp')}
                    checked={allowChartDataDownload} 
                    onChange={(value) => 
                    setAttributes({ allowChartDataDownload: value })} 
                />
            </PanelBody>
             {/* Grid Settings Panel */}
            <PanelBody title={__('Grid', 'lcp')} initialOpen={false}>
                {/* Render X-Grid */}
                <ToggleControl 
                    label={__('Show X Grid', 'lcp')}
                    checked={renderXGrid} 
                    onChange={(value) => 
                    setAttributes({ renderXGrid: value })} 
                />
                {/* Render Y-Grid */}
                <ToggleControl 
                    label={__('Show Y Grid', 'lcp')}
                    checked={renderYGrid} 
                    onChange={(value) => 
                    setAttributes({ renderYGrid: value })} 
                />
            </PanelBody>
            {/* 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>
                            <LCPDimensionControl
                                unitTypes={['px']}
                                label={__('Legend Font Size', 'lcp')}
                                value={legendFontSize}
                                onChange={(value) => setAttributes({ legendFontSize: value })}
                            />
                        </div>
                    </div>
                )}

            
            </PanelBody>
             {/* Labels Settings Panel */}
             <PanelBody title={__('Labels', 'lcp')} initialOpen={false}>
                {/* Show X-Axis Label*/}
                <ToggleControl
                    label={__('Show X-Axis', 'lcp')}
                    checked={showXAxisLabel}
                    onChange={(value) => setAttributes({ showXAxisLabel: value })}
                />
                {/* X-Axis Label */}
                <TextControl
                    label={__('X Axis Label', 'lcp')}
                    value={xAxisLabel}
                    onChange={(value) => setAttributes({ xAxisLabel: value })}                
                    placeholder={__('Enter X-axis label...', 'lcp')}
                />
                {/* Show Y-Axis */}
                <ToggleControl
                    label={__('Show Y-Axis Label', 'lcp')}
                    checked={showYAxisLabel}
                    onChange={(value) => setAttributes({ showYAxisLabel: value })}
                />
                {/* Y-Axis Label */}
                <TextControl
                    label={__('Y Axis Label', 'lcp')}
                    value={yAxisLabel}
                    onChange={(value) => setAttributes({ xAxisLabel: value })}                
                    placeholder={__('Enter X-axis label', 'lcp')}
                />
            </PanelBody>    
            {/* Controls Settings Panel */}
            <PanelBody title={__('Controls', 'lcp')} initialOpen={false}>
            <div>
                            {/* Top Location Button */}
                            <Button
                                isPrimary={selectedToolbarLocation === 'top'}
                                onClick={() => setSelectedToolbarLocation('top')}
                            >
                                {__('Top', 'lcp')}
                            </Button>

                            {/* Bottom Location Button */}
                            <Button
                                isPrimary={selectedToolbarLocation === 'bottom'}
                                onClick={() => setSelectedToolbarLocation('bottom')}
                            >
                                {__('Bottom', 'lcp')}
                            </Button>
                            <LCPDimensionControl
                                unitTypes={['px']}
                                label={__('Legend Font Size', 'lcp')}
                                value={legendFontSize}
                                onChange={(value) => setAttributes({ legendFontSize: value })}
                            />
                        </div>
                <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;