import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { ToggleControl, TextControl, PanelBody, ColorPicker, SelectControl, __experimentalNumberControl as NumberControl} from '@wordpress/components';
import './editor.scss';
import LCPDatasetBuilder from '../../components/LCPDatasetBuilder';
import LCPChartBlockSettings from '../../components/LCPChartBlockSettings';
import LCPDimensionControl from '../../components/LCPDimensionControl';
import LCPLegend from '../../components/LCPLegend';

export default function Edit({ attributes, setAttributes }) {
    const {
        chartHeight = '400px',
        chartWidth = '100%',
        valueColumn = 'Value',
        labelsColumn = 'Label',
        colorColumn = 'color',
        popoverColumn = 'content',
        chartData = [],
        renderLegend = false,
        toolbarLocation = 'top'
    } = attributes;

    const blockProps = useBlockProps();

    // Sample legend items (you'll want to generate this from your data)
    const items = [ 
        { Label: "Category 1", color: "#ff0000" },
        { Label: "Category 2", color: "#00ff00" },
        { Label: "Category 3", color: "#0000ff" }
    ];

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

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

            <div className="lcp-line-graph-container">
                {toolbarLocation === 'top' && (
                    <div className="lcp-visualizer-toolbar">
                        <span>Toolbar</span>
                    </div>
                )}

                {renderLegend && (
                    <LCPLegend 
                        items={items}
                        itemSize={15}
                        spacing={8}
                    />
                )}

                <div className="lcp-line-graph-placeholder">
                    {__('Line Graph Visualization Will Appear Here', 'lcp')}
                </div>

                {toolbarLocation === 'bottom' && (
                    <div className="lcp-visualizer-toolbar">
                        <span>Toolbar</span>
                    </div>
                )}
            </div>
        </div>
    );
}