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 BarGraph from './components/BarGraph';
import LCPDatasetBuilder from '../../components/LCPDatasetBuilder';
import LCPDimensionControl from '../../components/LCPDimensionControl';
import LCPChartBlockSettings from '../../components/LCPChartBlockSettings';
import LCPLegend from '../../components/LCPLegend';





export default function Edit({ attributes, setAttributes }) {

    const items = [ 
        { Label: "Category 1", color: "#ff0000" },
        { Label: "Category 2", color: "#00ff00" },
        { Label: "Category 1", color: "#ff0000" },
        { Label: "Categokhkjhkjhkjhky 2", color: "#00ff00" },
        { Label: "Category 1", color: "#ff0000" },
        { Label: "Category 2", color: "#00ff00" },
        { Label: "Category 1", color: "#ff0000" },
        { Label: "Cat 2", color: "#00ff00" },
        { Label: "Coy 1", color: "#ff0000" },
      
    ];

    const {
        chartHeight = '400px',
        chartWidth = '100%',
        barColor = '#007cba',
        chartData = [],
        valueColumn = 'Value',
        labelsColumn = 'Label',
        colorColumn = 'color',
        popoverColumn = 'content',
        barsColorSource = 'default',
        hierachicalDepth = 1,
        enableDrillDown = false,
        enableStackedBars = false,
        hierarchicalSource = 'parent',
        hierarchicalColumnOrder = '',
        renderLegend = false,
        toolbarLocation = 'top',
        enableGroupedBars = false,
        groupedBarsColumn = ''
    } = attributes;

    const blockProps = useBlockProps();

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



        
    return (
        <div {...blockProps}>
            <InspectorControls>
                {/* Bar Graph-specific Settings */}
                <PanelBody title={__('Chart Settings', 'lcp')}>
                    <LCPDatasetBuilder 
                        chartType="bar"
                        chartData={chartData}
                        onChange={handleDatasetChange}
                        attributes={attributes}
                        setAttributes={setAttributes}
                    />
                    {/* Select the source of the hierarchies */}
                    <SelectControl
                        label={__('Color Source', 'lcp')}
                        help={__('Select the logic for setting the colors', 'lcp')}
                        value={hierarchicalSource || 'parent'}
                        options={[
                            { label: 'Parent Column', value: 'parent' }, 
                            { label: 'Column Order', value: 'columnOrder' }
                        ]}
                        onChange={(value) => setAttributes({ hierarchicalSource: value })}
                    />
                    {hierarchicalSource === 'columnOrder' && (
                        <TextControl
                            label={__('Hierarchical Column Order', 'lcp')}
                            value={hierarchicalColumnOrder}
                            onChange={(value) => setAttributes({ hierarchicalColumnOrder: value })}
                        />
                    )}
                     {/* Enable Drilling Down through hierarchies */}
                    <ToggleControl
                        label={__('Enable Drill Down', 'lcp')}
                        checked={enableDrillDown}
                        onChange={(value) => setAttributes({ enableDrillDown: value })}
                    />
                    <ToggleControl
                        label={__('Enable Stacked Bars', 'lcp')}
                        checked={enableStackedBars}
                        onChange={(value) => setAttributes({ enableStackedBars: value })}
                    />
                    <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>
                {/* Color Settings */}
                <PanelBody title={__('Color Settings', 'lcp-visualize')} initialOpen={true}>
                    {/* Color Settings */}
                        {/* Select how the colors will be chosen */}
                    <SelectControl
                        label={__('Color Source', 'lcp')}
                        help={__('Select the logic for setting the colors', 'lcp')}
                        value={barsColorSource || 'default'}
                        options={[
                            { label: 'Default', value: 'default' }, // Use the default color logic, value: 'option1' },
                            { label: 'Swatch', value: 'swatch' }
                        ]}
                        onChange={(value) => setAttributes({ barsColorSource: value })}
                    />
                </PanelBody>
                {/* Common Chart Settings */}
                <LCPChartBlockSettings
                    attributes={attributes}
                    setAttributes={setAttributes} 
                />

            </InspectorControls>

            <div className="lcp-bar-graph-container">
                {toolbarLocation === 'top' && (
                <div className="lcp-visualizer-toolbar">
                    <span>Toolbar</span>
                </div>
                )}
                {renderLegend && (
                    <LCPLegend 
                        items={items}
                        width={300}
                        height={150}
                        itemSize={15}
                        spacing={8}
                    />
                )}

                <BarGraph
                    chartData={chartData}
                    height={chartHeight}
                    width={chartWidth}
                    valueColumn={valueColumn}
                    labelsColumn={labelsColumn}
                    colorColumn={colorColumn}
                    popoverColumn={popoverColumn}
                    defaultBarColor={barColor}
                />
                {toolbarLocation === 'bottom' && (
                    <div className="lcp-visualizer-toolbar">
                        <span>Toolbar</span>
                    </div>
                )}
            </div>
 
        </div>
    );
}
