import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ColorPicker } from '@wordpress/components';
import './editor.scss';
import BarGraph from './components/BarGraph';
import LCPDatasetBuilder from '../../components/LCPDatasetBuilder';
import LCPDimensionControl from '../../components/LCPDimensionControl';
import LCPChartBlockSettings from '../../components/LCPChartBlockSettings';

export default function Edit({ attributes, setAttributes }) {
    const {
        chartHeight = '400px',
        chartWidth = '100%',
        barColor = '#007cba',
        chartData = [],
        valueColumn = 'Value',
        labelsColumn = 'Label',
        colorColumn = 'color',
        popoverColumn = 'content',

    } = attributes;

    const blockProps = useBlockProps();

    const handleDatasetChange = (newData) => {
        setAttributes({ chartData: newData });
    };



        
    return (
        <div {...blockProps}>
            <InspectorControls>
                {/* Bar Graph-specific Settings */}
                <PanelBody title={__('Chart Settings', 'lcp-visualize')}>
                    <LCPDatasetBuilder 
                        chartType="bar"
                        chartData={chartData}
                        onChange={handleDatasetChange}
                        attributes={attributes}
                        setAttributes={setAttributes}
                    />
                    <LCPDimensionControl
                        label={__('Chart Height', 'lcp-visualize')}
                        value={chartHeight}
                        onChange={(value) => setAttributes({ chartHeight: value })}
                    />
                    <LCPDimensionControl
                        label={__('Chart Width', 'lcp-visualize')}
                        value={chartWidth}
                        onChange={(value) => setAttributes({ chartWidth: value })}
                    />

                </PanelBody>
                {/* Common Chart Settings */}
                <LCPChartBlockSettings
                    attributes={attributes}
                    setAttributes={setAttributes} 
                />

            </InspectorControls>

            <div className="lcp-bar-graph-container">
                <BarGraph
                    chartData={chartData}
                    height={chartHeight}
                    width={chartWidth}
                    valueColumn={valueColumn}
                    labelsColumn={labelsColumn}
                    colorColumn={colorColumn}
                    popoverColumn={popoverColumn}
                    defaultBarColor={barColor}
                />
            </div>
        </div>
    );
}