import { useSmarterElements } from '@smarterservices/smarter-elements';

function MyComponent() {
  const elements = useSmarterElements();
  
  const handleCreateElement = async () => {
    const element = elements.create('blockkit/renderer', {
      config: {
        // Add your configuration here
      },
      onReady: () => {
        console.log('Element is ready');
      },
      onError: (error) => {
        console.error('Element error:', error);
      }
    });
    
    // Mount the element
    element.mount('#element-container');
    
    // Or open as modal
    await element.openModal({
      width: '80%',
      maxWidth: '900px'
    });
  };
  
  return (
    <div>
      <button onClick={handleCreateElement}>
        Create Renderer
      </button>
      <div id="element-container"></div>
    </div>
  );
}

// Load SmarterElements
import { SmarterElements } from '@smarterservices/smarter-elements';

// Initialize
const elements = new SmarterElements({
  baseUrl: '/elements'
});

// Create element
const element = elements.create('blockkit/renderer', {
  config: {
    // Add your configuration here
  },
  onReady: () => {
    console.log('Element is ready');
  },
  onError: (error) => {
    console.error('Element error:', error);
  }
});

// Mount to DOM element
element.mount('#element-container');

// Or open as modal
element.openModal({
  width: '80%',
  maxWidth: '900px'
});

interface InputSchema {
    /**
     * Array of BlockKit elements to render
     * @optional - Either blocks or blocksJson must be provided
     */
    blocks?: Array<{
        type: string;
        [key: string]: any;
    }>;

    /**
     * JSON string containing BlockKit elements
     * @optional - Either blocks or blocksJson must be provided
     */
    blocksJson?: string;

    /**
     * Key-value pairs for dynamic content replacement
     * @optional
     * @example { "courseName": "React Fundamentals", "instructor": "John Doe" }
     */
    replacements?: Record<string, any>;

    /**
     * Theme configuration for the rendered content
     * @optional
     */
    theme?: {
        /**
         * Primary color scheme
         * @default "blue"
         */
        primaryColor?: 'blue' | 'green' | 'red' | 'purple' | 'orange' | 'gray';

        /**
         * Component size variant
         * @default "medium"
         */
        size?: 'small' | 'medium' | 'large';

        /**
         * Border radius style
         * @default "medium"
         */
        borderRadius?: 'none' | 'small' | 'medium' | 'large';
    };

    /**
     * Accessibility configuration
     * @optional
     */
    accessibility?: {
        /**
         * ARIA label for the rendered content
         */
        ariaLabel?: string;

        /**
         * ARIA description for the rendered content
         */
        ariaDescription?: string;

        /**
         * Whether to announce content changes to screen readers
         * @default true
         */
        announceChanges?: boolean;
    };

}

interface OutputSchema {
    /**
     * The rendered BlockKit content as HTML
     */
    renderedContent: string;

    /**
     * Parsed and validated BlockKit elements
     */
    parsedBlocks: Array<{
        type: string;
        [key: string]: any;
    }>;

    /**
     * Current theme configuration
     */
    currentTheme: {
        primaryColor: string;
        size: string;
        borderRadius: string;
    };

    /**
     * Validation errors, if any
     */
    validationErrors: Array<{
        blockIndex: number;
        field: string;
        message: string;
    }>;

}

interface EventsSchema {
    /**
     * Fired when BlockKit content is successfully rendered
     */
    'content-rendered': {
        /**
         * Number of blocks rendered
         */
        blockCount: number;

        /**
         * Rendering time in milliseconds
         */
        renderTime: number;

        /**
         * Whether any replacements were applied
         */
        hasReplacements: boolean;
    };

    /**
     * Fired when there's an error rendering BlockKit content
     */
    'render-error': {
        /**
         * Error message
         */
        message: string;

        /**
         * Error code
         */
        code: 'INVALID_JSON' | 'VALIDATION_ERROR' | 'RENDER_ERROR';

        /**
         * Block index where error occurred (if applicable)
         */
        blockIndex?: number;
    };

    /**
     * Fired when user interacts with rendered content
     */
    'content-interaction': {
        /**
         * Type of interaction
         */
        interactionType: 'click' | 'focus' | 'hover' | 'input';

        /**
         * Element that was interacted with
         */
        elementType: string;

        /**
         * Additional data about the interaction
         */
        data?: Record<string, any>;
    };

    /**
     * Fired when content is updated with new blocks or replacements
     */
    'content-updated': {
        /**
         * Previous block count
         */
        previousBlockCount: number;

        /**
         * New block count
         */
        newBlockCount: number;

        /**
         * Whether replacements changed
         */
        replacementsChanged: boolean;
    };

    /**
     * Fired when theme is changed
     */
    'theme-changed': {
        /**
         * Previous theme configuration
         */
        previousTheme: {
            primaryColor: string;
            size: string;
            borderRadius: string;
        };

        /**
         * New theme configuration
         */
        newTheme: {
            primaryColor: string;
            size: string;
            borderRadius: string;
        };
    };

}

const element = elements.create('blockkit/renderer', {
  onEvent: (eventType, data) => {
    switch (eventType) {
      case 'eventName':
        console.log('Event received:', data);
        break;
    }
  }
});

const element = elements.create('blockkit/renderer', {
  config: {
    // Minimal configuration
  }
});

element.mount('#container');

const element = elements.create('blockkit/renderer', {
  config: {
    // Your configuration
  }
});

await element.openModal({
  width: '90%',
  maxWidth: '1000px',
  dismissOnDocumentClick: false,
  escapeClose: true
});