import {
  DeesElement,
  customElement,
  type TemplateResult,
  html,
  property,
  css,
} from '@design.estate/dees-element';

// Import from local demotools
import '../../ts_demotools/demotools.js';

@customElement('test-withwrapper')
export class TestWithWrapper extends DeesElement {
  public static demo = () => html`
    <dees-demowrapper .runAfterRender=${async (wrapper) => {
      console.log('DemoWrapper: Found wrapper element', wrapper);
      
      const testElement = wrapper.querySelector('test-withwrapper');
      if (testElement) {
        console.log('DemoWrapper: Found test-withwrapper element');
        testElement.dynamicValue = 'Set by demo wrapper!';
        testElement.counter = 100;
        
        // Test querySelector functionality
        const innerDiv = wrapper.querySelector('.inner-content');
        console.log('DemoWrapper: Found inner div:', innerDiv);
        
        // Test querySelectorAll
        const allButtons = wrapper.querySelectorAll('button');
        console.log(`DemoWrapper: Found ${allButtons.length} buttons`);
      }
    }}>
      <test-withwrapper></test-withwrapper>
      <div style="margin-top: 10px; padding: 10px; background: #e0e0e0;">
        This div is also inside the wrapper
      </div>
    </dees-demowrapper>
  `;

  @property({ type: String })
  public dynamicValue: string = 'Initial value';

  @property({ type: Number })
  public counter: number = 0;

  @property({ type: Boolean })
  public isActive: boolean = false;

  public static styles = [
    css`
      :host {
        display: block;
        padding: 20px;
        background: #e8f5e9;
        border: 2px solid #4caf50;
        border-radius: 8px;
      }
      .wrapper-info {
        background: #c8e6c9;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 10px;
      }
      .inner-content {
        background: white;
        padding: 15px;
        border-radius: 4px;
        margin: 10px 0;
      }
      button {
        background: #4caf50;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        margin-right: 10px;
      }
      button:hover {
        background: #45a049;
      }
      .status {
        margin-top: 10px;
        font-family: monospace;
      }
    `
  ];

  public render() {
    return html`
      <div class="wrapper-info">
        This element is wrapped with dees-demowrapper in its demo
      </div>
      
      <div class="inner-content">
        <h3>Dynamic Value: ${this.dynamicValue}</h3>
        <p>Counter: ${this.counter}</p>
        <p>Active: ${this.isActive ? 'Yes' : 'No'}</p>
        
        <button @click=${() => this.counter++}>Increment</button>
        <button @click=${() => this.isActive = !this.isActive}>Toggle Active</button>
        <button @click=${() => this.dynamicValue = 'Clicked!'}>Change Value</button>
      </div>
      
      <div class="status">
        Properties panel should detect this element inside the wrapper
      </div>
    `;
  }
}