import { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import '../../dees-panel/dees-panel.js';
import '../../00group-form/dees-form/dees-form.js';
import '../../00group-form/dees-form-submit/dees-form-submit.js';

export const demoFunc = () => html`
  <style>
    ${css`
      .demo-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 24px;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      dees-panel {
        margin-bottom: 24px;
      }
      
      dees-panel:last-child {
        margin-bottom: 0;
      }
      
      .horizontal-group {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
      }
      
      .spacer {
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        font-size: 14px;
      }
    `}
  </style>
  
  <div class="demo-container">
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Demonstrate programmatic interaction with basic dropdowns
      const countryDropdown = elementArg.querySelector('dees-input-dropdown[label="Select Country"]');
      const roleDropdown = elementArg.querySelector('dees-input-dropdown[label="Select Role"]');
      
      // Log when country changes
      if (countryDropdown) {
        countryDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
          console.log('Country selected:', event.detail);
        });
      }
      
      // Log when role changes
      if (roleDropdown) {
        roleDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
          console.log('Role selected:', event.detail);
        });
      }
    }}>
      <dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
        <dees-input-dropdown
          .label=${'Select Country'}
          .options=${[
            { option: 'United States', key: 'us' },
            { option: 'Canada', key: 'ca' },
            { option: 'Germany', key: 'de' },
            { option: 'France', key: 'fr' },
            { option: 'United Kingdom', key: 'uk' },
            { option: 'Australia', key: 'au' },
            { option: 'Japan', key: 'jp' },
            { option: 'Brazil', key: 'br' }
          ]}
          .selectedOption=${{ option: 'United States', key: 'us' }}
        ></dees-input-dropdown>
        
        <dees-input-dropdown
          .label=${'Select Role'}
          .options=${[
            { option: 'Administrator', key: 'admin' },
            { option: 'Editor', key: 'editor' },
            { option: 'Viewer', key: 'viewer' },
            { option: 'Guest', key: 'guest' }
          ]}
        ></dees-input-dropdown>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Demonstrate simpler dropdown without search
      const priorityDropdown = elementArg.querySelector('dees-input-dropdown');
      
      if (priorityDropdown) {
        priorityDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
          console.log(`Priority changed to: ${event.detail.option}`);
        });
      }
    }}>
      <dees-panel .title=${'2. Without Search'} .subtitle=${'Dropdown with search functionality disabled for simpler selection'}>
        <dees-input-dropdown
          .label=${'Priority Level'}
          .enableSearch=${false}
          .options=${[
            { option: 'High', key: 'high' },
            { option: 'Medium', key: 'medium' },
            { option: 'Low', key: 'low' }
          ]}
          .selectedOption=${{ option: 'Medium', key: 'medium' }}
        ></dees-input-dropdown>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Demonstrate horizontal layout with multiple dropdowns
      const dropdowns = elementArg.querySelectorAll('dees-input-dropdown');
      
      // Log all changes from horizontal dropdowns
      dropdowns.forEach((dropdown) => {
        dropdown.addEventListener('selectedOption', (event: CustomEvent) => {
          const label = dropdown.getAttribute('label');
          console.log(`${label}: ${event.detail.option}`);
        });
      });
    }}>
      <dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
        <div class="horizontal-group">
          <dees-input-dropdown
            .label=${'Department'}
            .layoutMode=${'horizontal'}
            .options=${[
              { option: 'Engineering', key: 'eng' },
              { option: 'Design', key: 'design' },
              { option: 'Marketing', key: 'marketing' },
              { option: 'Sales', key: 'sales' }
            ]}
          ></dees-input-dropdown>
          
          <dees-input-dropdown
            .label=${'Team Size'}
            .layoutMode=${'horizontal'}
            .enableSearch=${false}
            .options=${[
              { option: '1-5', key: 'small' },
              { option: '6-20', key: 'medium' },
              { option: '21-50', key: 'large' },
              { option: '50+', key: 'xlarge' }
            ]}
          ></dees-input-dropdown>
          
          <dees-input-dropdown
            .label=${'Location'}
            .layoutMode=${'horizontal'}
            .options=${[
              { option: 'Remote', key: 'remote' },
              { option: 'On-site', key: 'onsite' },
              { option: 'Hybrid', key: 'hybrid' }
            ]}
          ></dees-input-dropdown>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Demonstrate state handling
      const requiredDropdown = elementArg.querySelector('dees-input-dropdown[required]');
      
      if (requiredDropdown) {
        // Show validation state changes
        requiredDropdown.addEventListener('blur', () => {
          console.log('Required dropdown lost focus');
        });
      }
    }}>
      <dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
        <dees-input-dropdown
          .label=${'Required Field'}
          .required=${true}
          .options=${[
            { option: 'Option A', key: 'a' },
            { option: 'Option B', key: 'b' },
            { option: 'Option C', key: 'c' }
          ]}
        ></dees-input-dropdown>
        
        <dees-input-dropdown
          .label=${'Disabled Dropdown'}
          .disabled=${true}
          .options=${[
            { option: 'Cannot Select', key: 'disabled' }
          ]}
          .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
        ></dees-input-dropdown>
      </dees-panel>
    </dees-demowrapper>
    
    <div class="spacer">
      (Spacer to test dropdown positioning)
    </div>
    
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // This dropdown demonstrates automatic positioning
      const dropdown = elementArg.querySelector('dees-input-dropdown');
      
      if (dropdown) {
        dropdown.addEventListener('selectedOption', (event: CustomEvent) => {
          console.log('Bottom dropdown selected:', event.detail);
        });
        
        // Note: The dropdown automatically detects available space
        // and opens upward when near the bottom of the viewport
      }
    }}>
      <dees-panel .title=${'5. Bottom Positioning'} .subtitle=${'Dropdown that opens upward when near bottom of viewport'}>
        <dees-input-dropdown
          .label=${'Opens Upward'}
          .options=${[
            { option: 'First Option', key: 'first' },
            { option: 'Second Option', key: 'second' },
            { option: 'Third Option', key: 'third' },
            { option: 'Fourth Option', key: 'fourth' },
            { option: 'Fifth Option', key: 'fifth' }
          ]}
        ></dees-input-dropdown>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Setup the interactive payload display
      const dropdown = elementArg.querySelector('dees-input-dropdown');
      const output = elementArg.querySelector('#selection-output');
      
      if (dropdown && output) {
        // Initialize output
        output.innerHTML = '<em>Select a product to see details...</em>';
        
        // Handle dropdown changes
        dropdown.addEventListener('change', (event: CustomEvent) => {
          if (event.detail.value) {
            output.innerHTML = `
              <strong>Selected:</strong> ${event.detail.value.option}<br>
              <strong>Key:</strong> ${event.detail.value.key}<br>
              <strong>Price:</strong> $${event.detail.value.payload?.price || 'N/A'}<br>
              <strong>Features:</strong> ${event.detail.value.payload?.features?.join(', ') || 'N/A'}
            `;
          }
        });
      }
    }}>
      <dees-panel .title=${'6. Event Handling & Payload'} .subtitle=${'Dropdown with payload data and change event handling'}>
        <dees-input-dropdown
          .label=${'Select Product'}
          .options=${[
            { option: 'Basic Plan', key: 'basic', payload: { price: 9.99, features: ['Feature A'] } },
            { option: 'Pro Plan', key: 'pro', payload: { price: 19.99, features: ['Feature A', 'Feature B'] } },
            { option: 'Enterprise Plan', key: 'enterprise', payload: { price: 49.99, features: ['Feature A', 'Feature B', 'Feature C'] } }
          ]}
        ></dees-input-dropdown>
        
        <div id="selection-output" style="margin-top: 16px; padding: 12px; background: rgba(0, 105, 242, 0.1); border-radius: 4px; font-size: 14px;"></div>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Demonstrate form integration and validation
      const form = elementArg.querySelector('dees-form');
      const projectTypeDropdown = elementArg.querySelector('dees-input-dropdown[key="projectType"]');
      const frameworkDropdown = elementArg.querySelector('dees-input-dropdown[key="framework"]');
      
      if (form) {
        form.addEventListener('formData', (event: CustomEvent) => {
          console.log('Form submitted with data:', event.detail.data);
        });
      }
      
      if (projectTypeDropdown && frameworkDropdown) {
        // Filter frameworks based on project type
        projectTypeDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
          const selectedType = event.detail.key;
          console.log(`Project type changed to: ${selectedType}`);
          
          // In a real app, you could filter the framework options based on project type
          // For demo purposes, we just log the change
        });
      }
    }}>
      <dees-panel .title=${'7. Form Integration'} .subtitle=${'Dropdown working within a form with validation'}>
        <dees-form>
          <dees-input-dropdown
            .label=${'Project Type'}
            .key=${'projectType'}
            .required=${true}
            .options=${[
              { option: 'Web Application', key: 'web' },
              { option: 'Mobile Application', key: 'mobile' },
              { option: 'Desktop Application', key: 'desktop' },
              { option: 'API Service', key: 'api' }
            ]}
          ></dees-input-dropdown>
          
          <dees-input-dropdown
            .label=${'Development Framework'}
            .key=${'framework'}
            .required=${true}
            .options=${[
              { option: 'React', key: 'react', payload: { type: 'web' } },
              { option: 'Vue.js', key: 'vue', payload: { type: 'web' } },
              { option: 'Angular', key: 'angular', payload: { type: 'web' } },
              { option: 'React Native', key: 'react-native', payload: { type: 'mobile' } },
              { option: 'Flutter', key: 'flutter', payload: { type: 'mobile' } },
              { option: 'Electron', key: 'electron', payload: { type: 'desktop' } }
            ]}
          ></dees-input-dropdown>
          
          <dees-form-submit .text=${'Create Project'}></dees-form-submit>
        </dees-form>
      </dees-panel>
    </dees-demowrapper>
  </div>
`