import { useState } from '@wordpress/element';
import { Button, Modal } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import LCPDataGrid from './LCPDataGrid';

const LCPDatasetBuilder = ({ attributes }) => {
    const [isOpen, setIsOpen] = useState(false);
    const [activeTab, setActiveTab] = useState(0); // Track the active tab

    return (
        <>
            <Button
                variant="secondary"
                onClick={() => setIsOpen(true)}
                style={{ marginBottom: '10px', width: '100%' }}
            >
                {__('Edit Dataset', 'lcp-visualize')}
            </Button>

            {isOpen && (
                <Modal
                    onRequestClose={() => setIsOpen(false)}
                    title={__('Dataset Builder', 'lcp-visualize')}
                    style={{ width: '90vw', height: '90vh' }}
                >
                    <div style={{ height: 'calc(90vh - 40px)', padding: '20px' }}>
                        {/* Tabs */}
                        <div style={{ display: 'flex', marginBottom: '20px' }}>
                            {attributes.datasets.map((dataset, index) => (
                                <button
                                    key={index}
                                    onClick={() => setActiveTab(index)} // Set the active tab
                                    style={{
                                        padding: '10px 20px',
                                        margin: '0 5px',
                                        backgroundColor: activeTab === index ? '#007cba' : '#f1f1f1',
                                        color: activeTab === index ? 'white' : 'black',
                                        border: '1px solid #ccc',
                                        borderRadius: '5px',
                                        cursor: 'pointer',
                                        transition: 'background-color 0.3s ease',
                                    }}
                                >
                                    {dataset.name}
                                </button>
                            ))}
                        </div>

                        {/* Render all the LCPDataGrid components */}
                        <div style={{ display: 'flex', flexDirection: 'column' }}>
                            {attributes.datasets.map((dataset, index) => (
                                <div
                                    key={index}
                                    style={{
                                        display: activeTab === index ? 'block' : 'none', // Show only the active tab
                                        transition: 'display 0.3s ease',
                                    }}
                                >
                                    <LCPDataGrid dataset={dataset.data} />
                                </div>
                            ))}
                        </div>
                    </div>
                </Modal>
            )}
        </>
    );
};

export default LCPDatasetBuilder;