/**
 * GitHub Code Viewer Block Variations
 * Provides pre-configured block patterns for common use cases
 */

(function(blocks, domReady) {
    'use strict';
    
    domReady(function() {
        // Register block variations
        blocks.registerBlockVariation('maple-code-blocks/code-block', {
            name: 'react-component',
            title: 'Maple: React Component',
            description: 'Display a React component from GitHub',
            icon: 'editor-code',
            attributes: {
                repository: 'facebook/react',
                theme: 'dark',
                height: '500px',
                showLineNumbers: true,
                initialFile: 'packages/react/src/React.js'
            },
            scope: ['inserter']
        });
        
        blocks.registerBlockVariation('maple-code-blocks/code-block', {
            name: 'documentation-viewer',
            title: 'Maple: Documentation Viewer',
            description: 'Display README or documentation files',
            icon: 'media-document',
            attributes: {
                repository: '',
                theme: 'light',
                height: '400px',
                showLineNumbers: false,
                initialFile: 'README.md'
            },
            scope: ['inserter']
        });
        
        blocks.registerBlockVariation('maple-code-blocks/code-block', {
            name: 'full-repository',
            title: 'Maple: Full Repository Browser',
            description: 'Browse entire repository with file tree',
            icon: 'category',
            attributes: {
                repository: '',
                theme: 'dark',
                height: '700px',
                showLineNumbers: true,
                initialFile: ''
            },
            scope: ['inserter']
        });
        
        blocks.registerBlockVariation('maple-code-blocks/code-block', {
            name: 'code-snippet',
            title: 'Maple: Code Snippet',
            description: 'Display a specific code file',
            icon: 'editor-code',
            attributes: {
                repository: '',
                theme: 'monokai',
                height: '300px',
                showLineNumbers: true,
                initialFile: ''
            },
            scope: ['inserter']
        });
        
        blocks.registerBlockVariation('maple-code-blocks/code-block', {
            name: 'tutorial-code',
            title: 'Maple: Tutorial Code',
            description: 'Perfect for coding tutorials and education',
            icon: 'welcome-learn-more',
            attributes: {
                repository: '',
                theme: 'solarized',
                height: '450px',
                showLineNumbers: true,
                title: 'Example Code'
            },
            scope: ['inserter']
        });
        
        // Register block styles (additional styling options)
        blocks.registerBlockStyle('maple-code-blocks/code-block', {
            name: 'default',
            label: 'Default',
            isDefault: true
        });
        
        blocks.registerBlockStyle('maple-code-blocks/code-block', {
            name: 'minimal',
            label: 'Minimal',
            className: 'is-style-minimal'
        });
        
        blocks.registerBlockStyle('maple-code-blocks/code-block', {
            name: 'rounded',
            label: 'Rounded',
            className: 'is-style-rounded'
        });
        
        blocks.registerBlockStyle('maple-code-blocks/code-block', {
            name: 'shadowed',
            label: 'Shadowed',
            className: 'is-style-shadowed'
        });
        
        // Register block patterns for complete layouts
        if (wp.blockEditor && wp.blockEditor.registerBlockPattern) {
            // Code Comparison Pattern
            wp.blockEditor.registerBlockPattern('maple-code-blocks/code-comparison', {
                title: 'Maple: Code Comparison',
                description: 'Compare code from two different repositories',
                categories: ['maple-code-blocks'],
                content: `
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:heading {"level":3} -->
<h3>Original Implementation</h3>
<!-- /wp:heading -->
<!-- wp:maple-code-blocks/code-block {"repository":"facebook/react","theme":"dark","height":"400px"} /-->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:heading {"level":3} -->
<h3>Alternative Implementation</h3>
<!-- /wp:heading -->
<!-- wp:maple-code-blocks/code-block {"repository":"vuejs/vue","theme":"dark","height":"400px"} /-->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->`
            });
            
            // Tutorial Pattern
            wp.blockEditor.registerBlockPattern('maple-code-blocks/tutorial-layout', {
                title: 'Maple: Tutorial Layout',
                description: 'Code tutorial with explanation',
                categories: ['maple-code-blocks'],
                content: `
<!-- wp:group {"backgroundColor":"light-gray","padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"}} -->
<div class="wp-block-group has-light-gray-background-color has-background" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px">
<!-- wp:heading -->
<h2>Code Tutorial</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Here's an example of how to implement this feature:</p>
<!-- /wp:paragraph -->
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"light","height":"350px","showLineNumbers":true,"title":"Step 1: Basic Setup"} /-->
<!-- wp:paragraph -->
<p>Now let's add some advanced functionality:</p>
<!-- /wp:paragraph -->
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"light","height":"350px","showLineNumbers":true,"title":"Step 2: Advanced Features"} /-->
</div>
<!-- /wp:group -->`
            });
            
            // Documentation Pattern
            wp.blockEditor.registerBlockPattern('maple-code-blocks/documentation', {
                title: 'Maple: Documentation Section',
                description: 'Documentation with embedded code',
                categories: ['maple-code-blocks'],
                content: `
<!-- wp:heading -->
<h2>API Documentation</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>This library provides a simple interface for working with the API.</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":3} -->
<h3>Installation</h3>
<!-- /wp:heading -->
<!-- wp:code -->
<pre class="wp-block-code"><code>npm install example-library</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"level":3} -->
<h3>Source Code</h3>
<!-- /wp:heading -->
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"dark","height":"500px","showLineNumbers":true} /-->
<!-- wp:heading {"level":3} -->
<h3>Examples</h3>
<!-- /wp:heading -->
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"dark","height":"300px","showLineNumbers":false,"initialFile":"examples/basic.js"} /-->`
            });
            
            // Showcase Pattern
            wp.blockEditor.registerBlockPattern('maple-code-blocks/showcase', {
                title: 'Maple: Project Showcase',
                description: 'Showcase a GitHub project',
                categories: ['maple-code-blocks'],
                content: `
<!-- wp:cover {"url":"","dimRatio":50,"align":"full"} -->
<div class="wp-block-cover alignfull">
<div class="wp-block-cover__inner-container">
<!-- wp:heading {"textAlign":"center","level":1} -->
<h1 class="has-text-align-center">Project Name</h1>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">A brief description of your amazing project</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">View on GitHub</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
</div>
<!-- /wp:cover -->
<!-- wp:maple-code-blocks/code-block {"repository":"","theme":"dark","height":"600px","showLineNumbers":true,"align":"full"} /-->`
            });
        }
    });
    
})(
    window.wp.blocks,
    window.wp.domReady
);