var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};
// Store original data globally
window.gridOriginalData = null;

dagcomponentfuncs.ModelLink = function(props) {
    if (!props.data.Model_Link) {
        return props.value;  // Just return text if no link
    }
    return React.createElement(
        'a',
        {
            href: props.data.Model_Link,
            target: '_blank',
            style: {
                color: '#007bff',
                textDecoration: 'none'
            }
        },
        props.value
    );
};

dagcomponentfuncs.PinRenderer = function(props) {
    // Store original data when component first renders
    if (!window.gridOriginalData) {
        const allRows = [];
        props.api.forEachNode(node => {
            allRows.push({...node.data});
        });
        window.gridOriginalData = allRows;
    }

    return React.createElement(
        'div',
        {
            onClick: function() {
                const api = props.api;
                const newValue = !props.value;
                
                // Create a copy of the original data and update pin state for clicked row only
                const allRows = window.gridOriginalData.map(row => ({
                    ...row,
                    // Preserve existing pin states and only update the clicked row
                    pinned: row.Model_Display === props.data.Model_Display ? newValue : 
                            (row.pinned || false)
                }));
                
                // Update window.gridOriginalData to maintain pin states
                window.gridOriginalData = allRows;
                
                // Separate rows
                const pinnedRows = allRows.filter(row => row.pinned);
                const unpinnedRows = allRows.filter(row => !row.pinned);
                
                // Update both sections
                api.setPinnedTopRowData(pinnedRows);
                api.setRowData(unpinnedRows);
            },
            style: {
                cursor: 'pointer',
                textAlign: 'center',
                fontSize: '16px'
            }
        },
        props.value ? '📌' : '☐'
    );
};